angular7快速上手

項目初始化

安裝 Angular CLI (可選)

$ npm install -g @angular/cli

檢測 Angular CLI 是否安裝成功

$ ng --version

創(chuàng)建新的項目

$ ng new project-name

啟動本地服務(wù)器

$ cd project-name
$ ng serve
# 或者
$ ng serve --deploy-url / --host 0.0.0.0 --disable-host-check --open --port 3333 --proxy-config proxy.conf.json --ssl --live-reload false

新建模塊
到指定目錄下床佳，執(zhí)行語句

ng generate component 模塊名稱

新建服務(wù)

ng g service 服務(wù)名稱

angular7缺陷

不支持hm
angular8現(xiàn)在默認(rèn)支持hot page reload滋早，即頁面刷新。
但是不支持模塊更新砌们。
即便按照官網(wǎng)配置了大堆使其支持模塊更新杆麸，那也是不保持當(dāng)前state的模塊更新。
不支持本地https開發(fā)
即便通過配置使其支持了本地https啟動浪感，每一次代碼改動昔头，會多次觸發(fā)hot page reload。
開發(fā)體驗賊差影兽。
這時不得不關(guān)掉hot page reload揭斧，手動刷新頁面。
啟動命令參考
ng serve --deploy-url / --host 0.0.0.0 --disable-host-check --open --port 3333 --proxy-config proxy.conf.json --ssl --live-reload false
沒有一個集中管理頁面state的庫
非父子組件之間的通信峻堰，得靠各自組件的service讹开。
打包后的文件，無法和開發(fā)中的文件進(jìn)行映射
無法代理線上的文件到開發(fā)中的本地文件

模板中復(fù)用html

<ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
<ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
<ng-template #MsgRef>被復(fù)用的html塊</ng-template>

循環(huán)創(chuàng)建html代碼塊

<ng-container *ngFor="let reasonItem of reasonObj;let ii = index;">
  <div class="recommend-result-box"  (click)="confrimReasonBox(ii)">
    {{reasonItem.name}}
  </div>
</ng-container>

html的class切換

<div [ngClass]="{'trueShowClass':true}"></div>

proxy.conf.js較佳實踐

proxy.confg.json改為proxy.config.js
更好支持js語法捐名，注釋旦万。

這時ng項目啟動命令為

ng serve --deploy-url / --host 0.0.0.0 --disable-host-check --open --port 3330 --proxy-config proxy.conf.js --ssl --live-reload false

注意proxy.conf.js

具體接口匹配需放在通用接口匹配之前
防止無法匹配到所需接口。
pathRewrite屬性使用函數(shù)形式
proxy.conf.js其實是webpack的proxy配置桐筏，配置方式一致纸型。

本地項目代碼啟動，配置線上的cookie方式

module.exports = {
     "/api/jiuding": {
     "target": "https://gztest.yuntrial.com",
     "secure": false,
     "changeOrigin": true,
     "headers":{
        "Cookie":"xxxxx"
     }
   }
}

DOM獲取的例子

import { Component, ElementRef, ViewChild, AfterViewInit, Renderer } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <div #greet>Hello {{ name }}</div>
  `,
})
export class AppComponent {
  name: string = 'Semlinker';

  @ViewChild('greet') greetDiv: ElementRef;

  constructor(private elementRef: ElementRef, private renderer: Renderer) { }

  ngAfterViewInit() {
    // 這個就是<div #greet>的dom對象
    this.greetDiv.nativeElement
  }
}

for循環(huán)的dom引用獲取

@ViewChildren('evidenceListArr') evidenceListArr: any;

// 獲取對應(yīng)的dom引用梅忌，idx是數(shù)組中對應(yīng)的序號
this.evidenceListArr._results[idx]

組件通信

使用service和rxjs狰腌，滿足各種場景。

import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>('Start');
changemessage(message: string): void {
  this.messageSource.next(message);
}

changeInfo() {
  this.communication.changemessage('Message from child 1.');
}
ngOnInit() {
  this.communication.messageSource.subscribe(Message => {
    window.alert(Message);
    this.info = Message;
  });
}

路由子模塊創(chuàng)建

在./src/app目錄下新建一個名叫pages模塊命令是ng generate module pages --routing牧氮。
在./src/app/pages目錄下新建組件ng generate component knowledge-index琼腔。
修改./src/app/pages/pages-routing.module.ts文件

import {KnowledgeIndexComponent} from './knowledge-index/knowledge-index.component';

const routes: Routes = [{
  path: '',
  children:[
    {
      path: 'knowledge-index',
      component: KnowledgeIndexComponent
    },
  ]
}];

修改./src/app-routing.module.ts文件

const routes: Routes = [
  {path: 'case',loadChildren: './pages/pages.module#PagesModule'},
  {path: '', redirectTo: '/case', pathMatch: 'full'},
];

訪問鏈接[http://localhost:4200/case/knowledge-index](http://localhost:4200/case/knowledge-index)即可。

ng-form的響應(yīng)式表單的數(shù)組類項綁定

angular官網(wǎng)例子對數(shù)組類綁定不夠完整踱葛，很多人都會搞不清楚寫法丹莲。
下面的例子比較完整。

<form nz-form [formGroup]="advancedOption" class="ant-advanced-search-form">
    <div formArrayName="textSearchs"  *ngFor="let textSearch of textSearchs.controls; let i=index">
      <div [formGroup]="textSearch">
        <nz-form-item nzFlex>
          <nz-form-label>文本檢索</nz-form-label>
          <nz-form-control>
            <nz-select [formControlName]="'type'" style="width: 100px;" nzPlaceHolder="">
              <nz-option nzValue="全文內(nèi)容" nzLabel="全文內(nèi)容"></nz-option>
              <nz-option nzValue="本院認(rèn)為" nzLabel="本院認(rèn)為"></nz-option>
              <nz-option nzValue="本院查明" nzLabel="本院查明"></nz-option>
              <nz-option nzValue="裁判結(jié)果" nzLabel="裁判結(jié)果"></nz-option>
              <nz-option nzValue="原告訴稱" nzLabel="原告訴稱"></nz-option>
              <nz-option nzValue="被告辯稱" nzLabel="被告辯稱"></nz-option>
              <nz-option nzValue="審理經(jīng)過" nzLabel="審理經(jīng)過"></nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <input
              nz-input
              placeholder=""
              [formControlName]="'text'"
            />
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
</form>

import { FormBuilder, FormArray, Validators } from '@angular/forms';

export class XxxComponent {
  advancedOption = this.fb.group({
    textSearchs: this.fb.array([
      this.fb.group(
        {
          type: ['全文內(nèi)容'],
          text: [''],
        }
      ),
    ])
  });
  
  get textSearchs(){
    return this.advancedOption.get('textSearchs') as FormArray;
  }
}