angular7快速上手

项目初始化

安装 Angular CLI (可选)

$ npm install -g @angular/cli

检测 Angular CLI 是否安装成功

$ ng --version

创建新的项目

$ ng new project-name

启动本地服务器

$ 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

• 新建模块
  到指定目录下，执行语句

ng generate component 模块名称

• 新建服务

ng g service 服务名称

angular7缺陷

1. 不支持hm
   angular8现在默认支持hot page reload，即页面刷新。
   但是不支持模块更新。
   即便按照官网配置了大堆使其支持模块更新，那也是不保持当前state的模块更新。

2. 不支持本地https开发
   即便通过配置使其支持了本地https启动，每一次代码改动，会多次触发hot page reload。
   开发体验贼差。
   这时不得不关掉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

3. 没有一个集中管理页面state的库
   非父子组件之间的通信，得靠各自组件的service。

4. 打包后的文件，无法和开发中的文件进行映射
   无法代理线上的文件到开发中的本地文件

模板中复用html

<ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
<ng-template [ngTemplateOutlet]="MsgRef"></ng-template>
<ng-template #MsgRef>被复用的html块</ng-template>

循环创建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较佳实践

1. 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

2. 具体接口匹配需放在通用接口匹配之前
   防止无法匹配到所需接口。
3. pathRewrite属性使用函数形式
4. 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循环的dom引用获取

@ViewChildren('evidenceListArr') evidenceListArr: any;

// 获取对应的dom引用，idx是数组中对应的序号
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;
  });
}

路由子模块创建

在./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的响应式表单的数组类项绑定

angular官网例子对数组类绑定不够完整，很多人都会搞不清楚写法。
下面的例子比较完整。

<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="全文内容" nzLabel="全文内容"></nz-option>
              <nz-option nzValue="本院认为" nzLabel="本院认为"></nz-option>
              <nz-option nzValue="本院查明" nzLabel="本院查明"></nz-option>
              <nz-option nzValue="裁判结果" nzLabel="裁判结果"></nz-option>
              <nz-option nzValue="原告诉称" nzLabel="原告诉称"></nz-option>
              <nz-option nzValue="被告辩称" nzLabel="被告辩称"></nz-option>
              <nz-option nzValue="审理经过" nzLabel="审理经过"></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: ['全文内容'],
          text: [''],
        }
      ),
    ])
  });
  
  get textSearchs(){
    return this.advancedOption.get('textSearchs') as FormArray;
  }
}