angular6.txt

（1）针对@angular/cli@6.0.8

在启动服务时，即ng serve,如果出现95% emitting LicenseWebpackPlugin的问题的解决办法：

删除node-modules,再用npm install 安装，不要使用cnpm




（2）我用@angular/cli@6.0.8创建一个angular6项目使用的命令：ng new appName --routing --style scss





（3）请求文件（xml | html ....）的配置：this.http.get('文件路径', {responseType: 'text'});





（4）操作dom的方式：@ViewChild('模板引用变量名称')，ElementRef， Renderer2

@ViewChild : https://segmentfault.com/a/1190000008695459




（5）对于请求文件
this.http.get( '文件路径', { responseType: 'text' })






（6）NgTemplateOutlet










（6）ng-template详解：https://toddmotto.com/angular-ngfor-template-element






（7）一个属性可以同时使用多个属性装饰器（下面的代码来自于组件）

  // dbsChecked 同时用了两个属性装饰器，表示当输入属性的值为true时，在组件的宿主元素上加上名为active的class样式，当false时，则去掉名为active的class样式
  @Input()
  @HostBinding('class.active') dbsChecked: boolean = false;







（8）[ngStyle]="{'background-image': 'url('+ dbsRightTop +')'}"    这样绑定可以避免出现安全性的警告







（9）async函数的简单使用方式以及需要注意的事项：
export class DropForecastService {

  constructor(
    public http: HttpClient,
  ) {
    this.asyncFn()
    .then(function (data) {
      console.log(data);
    })
    .catch(function (err) {
      console.error(err);
    })
  }

  // async函数中 当await后面的promise返回结果时才会继续执行后面的代码，捕获错误时要用throw抛出异常，不然catch不会被调用
  async asyncFn () {
    try {
      const f1: any = await this.http.get('./assets/demo.json').toPromise();
      const f2: any = await this.http.get('./assets/demo.json', {params: f1}).toPromise();
      return this.http.get('./assets/demo.json', {params: f2}).toPromise();
    } catch (error) {
      // new Error(error);  //这样任然会调用then,而catch不会被调用
      throw new Error(error);
    }

  };

}







（10）当<div [@flyInOut]="'in'"></div>*通配符会自动匹配到当前激活的名为in的状态

animations: [
  trigger('flyInOut', [
    state('in', style({opacity: 1, transform: 'translateX(0)'})),
    transition('void => *', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition('* => void', [
      animate('0.2s 0.1s ease-out', style({
        opacity: 0,
        transform: 'translateX(100%)'
      }))
    ])
  ])
]




（11）ContentChild    $implicit





（12）使用<ng-template></ng-template>来实现递归循环

父组件传递给子组件（即要实现的递归组件）的数据：

    introduceNavList = [
      {
        domId: 'content1',
        name: '形态特征'
      },
      {
        domId: 'content2',
        name: '黄山风景区自然概况'
      },
      {
        domId: 'content3',
        name: '黄山杜鹃花资源价值',
        children: [
          {
            domId: 'content3_1',
            name: '美学观赏价值'
          },
          {
            domId: 'content3_2',
            name: '药用治疗价值'
          },
          {
            domId: 'content3_3',
            name: '科学研究价值'
          },
          {
            domId: 'content3_4',
            name: '旅游经济价值'
          },
        ]
      },
      {
        domId: 'content4',
        name: '形态特征'
      },
    ];


子组件（即要实现的递归组件）接收父组件传递过来的数据：

@Input('baseList') navList = [];




在子组件模板中实现递归：


<ng-container *ngTemplateOutlet="tpl; context: {navList: navList}"></ng-container>  //ngTemplateOutlet即显示名为tpl的模板

<ng-template #tpl let-navList="navList">
    <ul class="nav-box">
        <li class="nav-item" *ngFor="let item of navList">
            <a>{{item.name}}</a>
            <ng-container *ngIf="item.children && item.children.length">
                <ng-container *ngTemplateOutlet="tpl; context: {navList: item.children}"></ng-container>  //在名为tpl模板中有条件的显示自己
            </ng-container>
        </li>
    </ul>
</ng-template>











（13）import { DomSanitizer } from '@angular/platform-browser';     

DomSanitizer 可以把值净化为在不同 DOM 上下文中的安全内容，来帮你防范跨站脚本攻击（XSS）类的安全问题。




（14）在angular项目中我已使用了路由模块，即是异步加载的模块，但也可以一个模块导出(export)一个对外暴露的组件，然后在根路由中配置该模块的路由，即是同步加载的模块，同步与异步模块的使用要根据项目的大小和运行终端予以取舍






（15）ExpressionChangedAfterItHasBeenCheckedError 报错原因
https://segmentfault.com/a/1190000013972657




（16）angular violation   ------  angular 卡顿问题

https://github.com/angular/angular/issues/21910





（17）二进制文件下载
    // 重要天气信息__导出附件
    exportImportantFile(fileName: string) {
        return this.http.get('/api/hrwarnapi/warning/important/download', { params: { fileName }, responseType: 'blob' }).pipe(
            map(blob => {
                var objectUrl = URL.createObjectURL(blob);
                var a = document.createElement('a');
                document.body.appendChild(a);
                a.setAttribute('style', 'display:none');
                a.setAttribute('href', objectUrl);
                a.setAttribute('download', fileName);       //a.setAttribute('download', `审核文件_id_${warningId}.docx`);
                a.click();
                URL.revokeObjectURL(objectUrl);
                return null;
            })
        );
    }




（18）在用*ngFor时一定要加上trackBy, 不然会有较大的性能损失

*ngFor="let data of basicTable1.data; trackBy: trackByDataItem"

trackByDataItem(index: number, item: any): number { return item.id; }




（19）nz-zorro-antd 1.8.1 使用nz-date-picker时不显示秒

<nz-date-picker [(ngModel)]="startDate" [nzShowTime]="{nzFormat: 'hh:mm'}" nzFormat="yyy-MM-dd hh:mm"
      [nzAllowClear]="false" [nzStyle]="{width: '155px'}"></nz-date-picker>




（20）<input (keyup.enter)="onSearch()" />