Angular笔记

浏览器前缀知识

webkit- （谷歌，Safari，新版Opera浏览器，所有基于WebKit 内核的浏览器）
-moz- （火狐浏览器）
-o- （旧版Opera浏览器）
-ms- （IE浏览器 和 Edge浏览器）
css前缀

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

js api前缀

let requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

监听具体表单控件

在html 中定义了 FromGroup，怎么来监听用户输入值的变化呢？
可以使用 valueChanges 来订阅变化。
首先，实例化FromGroup

 create(){
    this.supplierFrom = this.fb.group({
              merchantName: [null, [Validators.required]],  
        });
}

然后，定义一个 onFormChanges 方法来监听 form的变化

onFormChanges(): void {
    // 监听整个表单
    // this.supplierFrom.valueChanges.subscribe(val => {
    //   console.log('onFormChanges', val);
    // });
    // 监听具体表单控件
    this.supplierFrom.get('merchantName').valueChanges.subscribe(val => {
      console.log('onFormChanges', val);
    });
  }

在ngInit 时调用以上两个方法

ngOnInit(): void {
   this.create();
    this.onFormChanges();
  }

JSON.stringify()和JSON.parse()

JSON.stringify()将对象、数组转换成字符串；
JSON.parse()将字符串转成json对象。

css禁止点击-pointerEvents

pointer-events 属性用于设置元素是否对鼠标事件做出反应。

 [style]="{ pointerEvents:i == tabNumber ?'none':'auto' }"

变更检测机制markForCheck()和detectChanges()区别

markForCheck() 和 detectChanges() 都是 ChangeDetectorRef 的方法，它们的作用是触发变更检测。

markForCheck() 的作用是标记组件或指令以及其子组件或指令为脏检查状态，但并不立即触发变更检测。这意味着，即使在此之后更改了组件的属性或状态，Angular也可能会等到下一次变更检测周期才会更新视图。markForCheck() 可以提高应用的性能，因为它只是通知 Angular，而不会立即触发变化检测。
而 detectChanges() 的作用是立即触发变化检测，即使组件或指令的状态并没有发生变化。这意味着，即使在此之前没有更改组件的属性或状态，Angular 也会立即更新视图并检查其子组件或指令的变化。这可能会导致不必要的性能开销，因此建议仅在必要时才使用 detectChanges()。
最佳实践是使用 markForCheck() 来标记组件或指令以及其子组件或指令为脏检查状态，然后让 Angular 在下一次变更检测周期中更新视图。仅在必要时才使用 detectChanges()，例如当需要立即更新视图时，或当使用第三方库时无法控制变更检测的时机时。