AngularJS常见问题

1. Use skip-import option to skip importing

   //问题：在该工程下，存在多个module文件
   //解决方案：创建组件时，指定module文件：
   ng generate component <name> [options]
   ng g c componentName --module=app.module(往app.module.ts中添加创建的组件信息)
   

2. 修改第三方组件的样式

   //ng-zorro等组件默认样式的修改
   //[nz-button]
   :host ::ng-deep .className{
       新的样式......
   }
   

3. html模板-TemplateRef

   //TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>
   <nz-step nzTitle="xxx" [nzDescription]="tl_2"></nz-step>
   <ng-template #tl_2>
   ...
   </ng-template>
   

4. nz-table

   复选框需要使用：nzShowCheckbox => [(nzChecked)]、(nzCheckedChange)、[nzIndeterminate]
   

5. nz-form

   下拉框绑定验证后规双向绑定才有效：nz-select => [(ngModel)]、formControlName、select_: [null, [Validators.required]]
   验证内容需要单独包裹：nz-form-control
   

6. ng-zorro 提示控件不可用

   将创建的组件加入@NgModule
   

7. 单个服务无法输出多个export class

   不是很能理解，后续更新。
   

8. ngModelChange获取改变之前的值

   通过改变ngModelChange和ngModel的顺序，可改变执行顺序
   <input nz-input [(ngModel)]="value" (ngModelChange)="inputChange($event,value)"/>
   <input nz-input (ngModelChange)="inputChange($event,value)"[(ngModel)]="value"/>
   //inputChange->(15,15)
   //inputChange->(15,5)
   

9. 巧用Promise

   Promise.all可以将多个Promise实例包装成一个新的Promise实例。
   同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
   

10. ngSwitch

    //ngSwitch，ngSwitchCase，ngSwitchDefault
    <ng-container [ngSwitch]="type">
        <div *ngSwitchCase="1"></div>
        <div *ngSwitchCase="2"></div>
        <div *ngSwitchDefault></div>
    </ng-container>
    

11. ngIf

    //1.避免使用多个互斥条件ngif，应采用ng-template方式
    <div *ngIf="condition; else elseBlock"></div>
    <ng-template #elseBlock>Content to render when value is null.</ng-template>
    
    //2.特殊用法，本地存储值
    <div *ngIf="condition as value;">{{value}}</div>
    

12. 数据渲染过程中增加遮罩

    1.内部逻辑
        使用Promise
    2.其他组件
        优先打开遮罩，然后配合setTimeout延迟加载逻辑，最后关闭即可
        
    示例：
    <nz-spin [nzSpinning]="isSpinning"></nz-spin>
    
    this.isSpinning = true;
    let _this = this;
    setTimeout(() => {
        ...
        _this.isSpinning = false;
    }, 100);
    

13. js性能调优与内存释放

     1.设置对象为null及时释放内存
     2.减少闭包中对象的引用
     3.减少及时计算（改为必要时计算）
    

参考文献

More than one module matches

https://blog.csdn.net/weboof/article/details/80513750

修改第三方组件的样式

https://blog.csdn.net/qq_38942978/article/details/108449730

ngModelChange

https://www.cnblogs.com/canghaishui/p/11801134.html

Promise

//www.greatytc.com/p/7e60fc1be1b2

Angular DevTools(chrome插件)

https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh/related

ngSwitch

https://blog.csdn.net/Xiewanru/article/details/82562737

js性能调优与内存释放

https://blog.csdn.net/lion_awake/article/details/7974301