angular - 为什么我需要添加 markForCheck() 来触发 Angular 中的更改检测？

Question

我不太明白为什么我需要在下面的代码中添加 markForCheck() 以使更改可见。为什么我的 @Input() 没有触发更改检测？

我正在将我的项目重构为 OnPush。这两个组件都启用了 OnPush。据我了解，当启用此功能并更改 Input() (如 messages )时，将触发更改检测。

在下面的代码中，我通过 graphqlService 调用电话.当我接到电话时，我会对传入的数据进行一些解析，然后将其设置为 informationMessages属性，绑定(bind)到子组件cv-messages通过其messages属性(property)。

结果是 ngOnChanges函数只被调用一次，当 informationMessages属性被初始化。但不是在将最终解析的数据设置为它时。

如果我添加 markForCheck() 它工作正常。

考虑这个父组件，模板如下:

<cv-messages [messages]="informationMessages"></cv-messages>

还有一个带有这段代码的 typescript 文件:

informationMessages: InformationMessageType[] = [];

ngOnInit() {
    this.graphqlService.loadInformationMessages().subscribe(data => {
        const informationMessages: InformationMessageType[] = data;

        .... // parsing stuff

        this.informationMessages = informationMessages;
        // add markForCheck() here
    });
}

消息组件有一个 ngOnChanges 函数，如下所示:

ngOnChanges(changes) {
    console.log(this.constructor.name ' CHANGE:', changes);
}

更新:

您可以在下面的答案评论中找到解决方案。基本上，变更检测是 不是 @Input() 时触发异步更改。所以在这种情况下，我们需要添加一个 markForCheck()强制更改检测。

Answer 1

As Angular docs says:

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

当输入已更改或 View 中已触发事件时，组件通常会被标记为脏(需要重新渲染)。调用此方法以确保即使未发生这些触发器也会检查组件。

因此，需要使用此方法将组件标记为脏以进行重新渲染。

更新:
ChangeDetectionStrategy有两种类型:

OnPush: 0 Use the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Change detection can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.

Default: 1 Use the default CheckAlways strategy, in which change detection is automatic until explicitly deactivated.

所以当你使用 OnPush然后 自动更改检测已停用 并且有必要将 View 标记为已更改，以便可以再次检查它。