我不明白为什么子组件的更改检测在这种情况下运行:
import { Component, ChangeDetectionStrategy } from '@angular/core'
@Component({
selector: 'app-root',
template: `
<cmp [ticks]="ticks" (update)="onUpdate($event)"></cmp>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
ticks = 0;
onUpdate(event) {
console.log(this.ticks);
}
}
import { Component, ChangeDetectionStrategy, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
@Component({
selector: 'cmp',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<p>Number of ticks: {{ticks}}</p>
`
})
export class CmpComponent implements OnInit, OnChanges {
@Input('ticks') ticks: number;
@Output() update: EventEmitter<number> = new EventEmitter();
ngOnInit() {
setInterval(() => {
this.ticks++;
this.update.emit(this.ticks);
}, 1000);
}
ngOnChanges() {
console.log('changed');
}
}
当我运行时,在子视图中更新“滴答数” .
当我删除在父级中侦听事件时,它不会更新视图 .
我的理解如下:
因为父实现了OnPush策略,所以当它侦听从子进程发出的事件时会触发更改检测 . 收到事件后,它不会改变'tick',因此子组件的@Input()不会更新 . 然而,实现OnPush策略的子组件更新了它的视图 . 因此它的行为就好像@Input改变了一样 .
从我的研究:
使用OnPush策略,如果出现以下情况,则会对组件进行更改检测:
-
在组件本身上收到绑定事件 .
-
@Input()已更新
-
|异步管道收到一个事件
调用 -
更改检测"manually"
这些似乎都不适用于子组件 .
有什么解释吗?非常感激 .
1 回答
首先感谢一个好问题 .
使用角度2.x.x,它将按照您的预期运行 .
https://plnkr.co/edit/TiOeci5Lr49xvRB5ozHb?p=preview
但是在angular4中引入了新的View Engine,并且所有代码都被完全覆盖了 .
https://plnkr.co/edit/SFruiPXEhMmYDP7WuBbj?p=preview
发生了什么变化?
当事件发生时,角度调用一些称为
markForCheck
的方法 .angular 2 version
angular 4 version
尽管代码看起来完全不同,但这里没有区别 . 它 starts with current component 并允许检查直到根组件的所有父组件 .
我突出显示了短语 starts with current component ,因为这正是改变了 .
Angular 2.x.x starts with AppComponent
Angular 4 starts with CmpComponent
因此
CmpComponent
将被打开以供检查