AngularJS常见问题

AngularJS常见问题

1. Use skip-import option to skip importing

   //问题：在该工程下，存在多个module文件
   //解决方案：创建组件时，指定module文件：
   ng generate component  [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, status: string, index: number }>
   
   
   ...
   
   

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的顺序，可改变执行顺序
   
   
   //inputChange->(15,15)
   //inputChange->(15,5)
   

9. 巧用Promise

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

10. ngSwitch

    //ngSwitch，ngSwitchCase，ngSwitchDefault
    
    	
    
        
    
        
    
    
    

11. ngIf

    //1.避免使用多个互斥条件ngif，应采用ng-template方式
    
    Content to render when value is null.
    
    //2.特殊用法，本地存储值
    {{value}}
    

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

    1.内部逻辑
    	使用Promise
    2.其他组件
    	优先打开遮罩，然后配合setTimeout延迟加载逻辑，最后关闭即可
    	
    示例：
    
    
    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

https://www.jianshu.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