我不明白为什么子组件的更改检测会在这种情况下运行:
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');
}
}
当我运行此“刻度数”时, subview 中会更新。
当我删除监听父级中的事件时,它不会更新 View 。
我的理解如下:
因为父级实现了 OnPush 策略,所以当它监听子级发出的事件时,它会触发更改检测。收到事件后,它不会更改“tick”,因此子组件的 @Input() 不会更新。然而,也实现 OnPush 策略的子组件会更新其 View 。因此,它的行为就好像它的 @Input 发生了变化。
根据我的研究:
使用 OnPush 策略,如果满足以下条件,则会对组件进行更改检测:
- 组件本身接收到绑定(bind)事件。
- @Input() 已更新
- |异步管道收到一个事件
- “手动”调用变更检测
这些似乎都不适用于子组件。
有什么解释吗?非常感激。
最佳答案
首先感谢您提出了一个好问题。
使用 Angular 2.x.x 它将按照您期望的方式工作。
https://plnkr.co/edit/TiOeci5Lr49xvRB5ozHb?p=preview
但是在 Angular4 中引入了新的 View 引擎,所有代码都被完全覆盖。
https://plnkr.co/edit/SFruiPXEhMmYDP7WuBbj?p=preview
发生了什么变化?
当事件发生时,Angular 会调用一些名为 markForCheck
的方法。
Angular 2 版本
AppView.prototype.markPathToRootAsCheckOnce = function () {
var /** @type {?} */ c = this;
while (isPresent(c) && c.cdMode !== ChangeDetectorStatus.Detached) {
if (c.cdMode === ChangeDetectorStatus.Checked) {
c.cdMode = ChangeDetectorStatus.CheckOnce;
}
if (c.type === ViewType.COMPONENT) {
c = c.parentView;
}
else {
c = c.viewContainer ? c.viewContainer.parentView : null;
}
}
};
Angular 4 版本
function markParentViewsForCheck(view) {
var /** @type {?} */ currView = view;
while (currView) {
if (currView.def.flags & 2 /* OnPush */) {
currView.state |= 8 /* ChecksEnabled */;
}
currView = currView.viewContainerParent || currView.parent;
}
}
尽管代码看起来完全不同,但这里没有区别。它从当前组件开始,并启用对所有父组件直至根组件的检查。
我突出显示了短语从当前组件开始,因为这正是已更改的内容。
Angular 2.x.x 以 AppComponent
View_App0.prototype.handleEvent_4 = function(eventName,$event) {
var self = this;
self.debug(4,2,3);
self.markPathToRootAsCheckOnce(); // self is AppComponent view
var result = true;
if ((eventName == 'update')) {
var pd_sub_0 = (self.context.onUpdate($event) !== false);
result = (pd_sub_0 && result);
}
return result;
};
Angular 4 以 CmpComponent
开头
function dispatchEvent(view, nodeIndex, eventName, event) {
var nodeDef = view.def.nodes[nodeIndex];
var startView = nodeDef.flags & 33554432 /* ComponentView */ ? asElementData(view, nodeIndex).componentView : view;
markParentViewsForCheck(startView);
return Services.handleEvent(view, nodeIndex, eventName, event);
}
因此CmpComponent
将被打开进行检查
关于Angular ChangeDetectionStrategy.OnPush 与发出事件的子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44607202/