变更检测
更改任何模型时, Angular会检测到更改并立即更新视图。这是Angular中的更改检测。该机制的目的是确保基础视图始终与其对应的模型保持同步。
如 DOM事件(单击, 悬停等) AJAX请求 计时器(setTimer(), setInterval())
1 Angular默认的change detection一旦触发,它会重新计算模板中以及绑定的表达式,然后再执行相应的视图更新。Angular最佳实践提出不要在模板中做比较复杂的计算或函数。
2 onPush机制那么就是告诉Angular在执行检测的时候,跳过当前组件内部的检测。只有当组件的input down输入有新值(变化)或内部有事件event up输出的时候,或者说组件再次通知Angular的检测机制来更新组件。
注意,在Angular的onPush检测机制中,只要组件的输入值input变化,组件内部才会执行更新。
但是在Javascript中,简单数据类型:boolean,null,未定义,Number,String;对象数据类型:数组,对象
简单数据类型在作为参数的时候是按值传递的,而复杂数据类型是按引用传递的。所以,如果按引用传递的值如Array或object数据类型发生变化,组件是不会更新的。
默认策略-更新引用类型时需要
this.arr = this.arr.push({xx:1})
onpush策略-组件再次通知Angular的检测机制来更新组件。
@Component({ selector: 'app-onpush', changeDetection: ChangeDetectionStrategy.OnPush, }) export class OnpushComponent implements OnInit {
data = []; constructor(private cdr: ChangeDetectorRef) {} ngOnInit(): void {} private getDictList() {
this.data = this.data.push({id:2}); this.cdr.markForCheck();
}