Angular笔记

1.升级AngularCLI版本

1.卸载
	npm uninstall -g angular-cli
2.清除缓存
	npm cache clean --force
3.查看是否卸载干净
	ng -v  若显示command not found则卸载干净
4.安装cli
	//安装最新版
	npm install -g @angular/cli@latest
	//安装指定版本
	npm install @angular/cli@~9.1.0

2.Angular同步

public UserMessage() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Bearer ' + this.cookieService.get(`${this.key}access_token`)
      })
    };
    const urlSuffix = `/user/info/v1.0/login-user/info`;
    return this.http.get(this.options.systemApi + urlSuffix, httpOptions).toPromise();
  }

  /**
   * 用户信息
   * @returns {Promise<{username: string; email: string; roles: string; id: string; realname: string}>}
   */
  public async getUserInfo() {
    const data = await this.UserMessage().then(
      (res: any) => {
        return {
          username: res.result.aliasName || '',
          email: res.result.email || '',
          roles: '',
          id: res.result.id || '',
          realname: res.result.userName || ''
        };
      },
      err => {}
    );
    return data;
  }

//调用接口获取数据
getCloudCenter() {
  return this.http.get<any>(
    `......`
  );
}

//同步获取数据
 async getCenterList(){
   let res = await this.service.getCloudCenter().toPromise();
     this.cloudCenterList = res.result;
     this.centerId = this.cloudCenterList[0].id;
 }
 
//初始化方法
async ngOnInit() {
   await this.getCenterList().then();
   this.search(true);
 }

• 异步调用pipe写法

 private _getPrice() {
     return this.service.getPrice(productPrice).pipe(
      tap(res => (this.yearPrice = res.productPriceList[0].yearPrice)),
      map(res => {
        productPrice.yearPrice = res.productPriceList[0].yearPrice;
        return productPrice;
      })
    );
}

  getPrice(params: IProductPrice) {
    return this.http.post<any>(`${this.url}/price`, params).pipe(map(res => res.result));
  }
//调用_getPrice
this._getPrice().subscribe();

3.枚举类管道设置

@Pipe({ name: 'contractEffectStatus' })
export class ContractEffectStatusPipe implements PipeTransform {
  constructor() {}

  private readonly effectStatus = [
    {
      code: 'ineffect',
      name: '生效'
    },

    {
      code: 'expired',
      name: '失效'
    }
  ];
  transform(value: string) {
    let name: string = '';
    for (const item of this.effectStatus) {
      if (item.code === value) {
        name = item.name;
        return name;
      }
    }
    return value;
  }
}

4.父组件中获得子组件的引用

<app-batch-push-modal #batchPushModal [modalType]="batchPushType" [pushType]="pushType" [cloudCenter]="cloudCenter">
</app-batch-push-modal>

  @ViewChild('batchExportModal') batchExportModal: BatchExportModalComponent; //父组件中获得子组件的引用

5.object参数空值过滤

适用于Httpclient

  private formatParam(param) {
    let p = {};
    for (let key in param) {
      if (param[key]) {
        p[key] = param[key];
      }
    }
    return p;
  }

6.Form表单校验

<div nz-row class='nz-row'>
  <label nz-col nzSpan='6' class='form-required' for='yearPrice'>年服务费</label>
  <div nz-col nzSpan='18' class='form-dev'>
    <input nz-input id='yearPrice' name='yearPrice' #yearPrice='ngModel'
           [(ngModel)]='productPrice.yearPrice' required placeholder='请输入' pattern='^(([1-9]{1}\d*)|(0{1}))(\.\d{1,4})?$'>
    <div class='error-group' *ngIf='yearPrice.invalid && (yearPrice.dirty || yearPrice.touched)'>
      <div *ngIf='yearPrice.errors.required'>
        请输入年服务费
      </div>
      <div *ngIf='yearPrice.errors.pattern'>
        只允许输入非负数，最多四位小数
      </div>
    </div>
  </div>
</div>