嵌入式与 ng-content 子项的不同 ChangeDetectionStrategy.OnPush 行为

Question

我正在调整应用程序的性能并遇到以下差异。请参阅 the stackblitz 以获取实时示例。

后缀为-on-push的组件有ChangeDetectionStrategy.OnPush，而后缀为-default的组件有默认策略。

我有两种方法，第一种方法命名为“嵌入式”，第二种方法命名为“ng-content”。说明如下。

根模板：

<h1>embedded</h1>
<app-embedded-on-push></app-embedded-on-push>

<h1>ng-content</h1>
<app-ng-content-on-push>
  <app-ng-content-default></app-ng-content-default>
</app-ng-content-on-push>

app-embedded-on-pushs 模板只是“嵌入”app-embedded-default 组件：

<app-embedded-default></app-embedded-default>

另一方面，app-ng-content-on-pushs 模板使用 ng-content 投影 app-ng-content-default 组件：

<ng-content></ng-content>

请查看 stackblitz 以获得更好的想法。

期待

由于具有 ChangeDetectionStrategy.OnPush 的组件仅在输入引用发生变化时才被检查（组件本身及其子组件），我的期望是在组件本身及其子组件上，更改检测不会被两种方法触发，命名为嵌入式和内容投影方法。

现实

使用嵌入式方法，行为符合预期，不会触发 app-embedded-default 上的更改检测。另一方面，使用内容投影（ng-content），app-ng-content-on-push 的子组件的变化检测被 触发，如上图所示堆栈闪电战。

有人可以解释为什么这是结果行为吗？两种方法的组件树相同，还是我错了？

Answer 1

现实是正确的，因为如果我们看一下模板：

<app-ng-content-on-push>
  <app-ng-content-default></app-ng-content-default>
</app-ng-content-on-push>

我们不能说 app-ng-content-default 是 app-ng-content-on-push 的子组件，而是这个组件被投影到 app-ng-content-on-push.

这意味着该组件是 AppComponent 模板的一部分，在检查 AppComponent 模板时将对其进行检查。 app-ng-content-on-push 不会保护 app-ng-content-default 免于检查。

嵌入式与 ng-content 子项的不同 ChangeDetectionStrategy.OnPush 行为

different ChangeDetectionStrategy.OnPush behaviour with embedded vs ng-content children

angular

angular-changedetection

期待

现实