具有嵌入式和ng内容子项的不同ChangeDetectionStrategy.OnPush行为

Question

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

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

我有两种方法，第一种命名为“ embedded”，第二种命名为“ 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-push的模板仅“嵌入” app-embedded-default组件：

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

另一方面，app-ng-content-on-push的模板将app-ng-content-default的组件投影到ng-content：

<ng-content></ng-content>

请参阅堆叠闪电战以获得更好的主意。

期望

由于仅在输入引用发生更改的情况下才检查具有ChangeDetectionStrategy.OnPush的组件（组件本身及其子组件），因此我期望在组件本身及其子组件上，更改检测会赢” 被两种方法（称为嵌入式方法和内容投影​​方法）触发。

现实

使用嵌入式方法，行为符合预期，不会触发app-embedded-default上的更改检测。 另一方面，使用内容投影（ng-content，将触发app-ng-content-on-push 的子组件的更改检测，如您在上面的堆叠闪电战中所见。< / p>

有人可以解释为什么这就是即将来临的行为吗？两种方法的组件树都相同，还是我错了？

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不受检查。