Principe of Angular OnPush+变化检测工作

Question

有三个组件：Parent、Child、ChildChild:

@Component({
template: `<div>{{parentProp}}</div> <child-component></child-component>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent {
public parentProp: string = 'parentValue1';
constructor(){}
ngOnInit() {
setTimeout(() => this.parentProp = 'parentValue2', 2000)
}
}
@Component({
selector:'child-component',
template: `<div>{{childProp}}</div> <child-child-component></child-child-component>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent {
public childProp: string = 'childValue1';
constructor(private cdr: ChangeDetectorRef){}
ngOnInit() {
setTimeout(() => {
this.childProp = 'childValue2';
thic.cdr.markForCheck();
}, 10000);
}
}
@Component({
selector:'child-child-component',
template: `<div>{{childChildProp}}</div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent {
public childChildProp: string = 'childChildValue1';
constructor(){}
ngOnInit() {
setTimeout(() => this.childChildProp = 'childChildValue2', 3000);
}
}

父级->儿童->ChildChild。所有这些都是OnPush。在parent和childChild上，DetectorRef和setTimeout在其模板属性发生更改的3秒钟内没有更改。在central-Child上，有一个10秒的setTimeout，它更改其模板属性AND changeDetectorRef，它执行markForCheck((。当它被执行时，子组件被标记为检查，并被重新绘制，它在上面，做标记为检查的父组件。完成后10秒，父组件重新发送并显示其道具的更改值。但正如我所知，它出现在上面(从子级到父级(，然后出现在下面(父级->子级->childChildChild(，并且应该标记为检查childChild组件。但事实并非如此。

接下来，如果我将markForChecked((更改为检测Child中的Changes((，它应该重新发送Child(它确实这样做了(及其子级(childChild(。但是childChild不会被重新考虑。

你能告诉我发生了什么吗？

Answer 1

markForCheck((标记被调用的组件及其所有待检查的OnPush祖先。也就是说，如果在"；"孩子"；它将标记"；"孩子"；以及"；"父"；，但不是"；childChild"；。变化检测周期遵循变化检测策略，因此不会检查"；childChild"；

detectChanges((检查调用它的组件和所有子级，但再次尊重子级的ChangeDetectionStrategies。这就是为什么"；childChild"；未选中。