综合笔记
浏览器前缀知识
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(),例如当需要立即更新视图时,或当使用第三方库时无法控制变更检测的时机时。