3

我正在调整应用程序的性能并遇到以下差异。请参阅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 模板将app-ng-content-default组件投影为ng-content：

<ng-content></ng-content>

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

期待

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

现实

使用嵌入式方法，行为符合预期，app-embedded-default不会触发更改检测。另一方面，通过内容ng-content投影（app-ng-content-on-push

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

4

1 回答 1

6

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

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

于 2019-03-08T19:07:26.683 回答