javascript - TemplateRef 和变化检测

Question

最近我开始积极使用模板来自定义我的 UI 组件。我还使用 OnPush 变化检测策略来优化性能。如果我将模板传递给嵌套组件，一切都会顺利进行。用户操作触发嵌套组件中的更改检测，它向上移动到定义模板的原始组件，更改检测也在那里触发，更新模板和我在那里的任何其他逻辑。

但是，如果我尝试使用模板制作弹出/警报/工具提示功能——我开始将 TemplateRef 向上传递到树中，进入弹出宿主组件。因此，如果我对其执行任何操作——变更检测将无法到达模板的源头。所以假设我在伪代码中有这个组件:

<p>Your balance: {{balance}}</p>

<ng-template #popup>
  Your balance: {{balance}}
  <button (click)="balance -= 100">Withdraw</button>
</ng-template>

如果我将此模板传递给位于 DOM 树中的弹出式宿主组件:

<main-component>
   <balance></balance>
</main-component>
<popup-host></popup-host>

然后单击“Withdraw”将不会触发原始组件中的更改检测。弹出窗口中模板内的 {{balance}} 将得到更新，但尽管它与原始余额组件中的变量相同 - 在某些东西触发其更改检测之前，balance 不会知道此更改。

有人可以分享他们将如何处理这个问题的想法吗？ OnPush 和模板是非常强大的工具，但在这种情况下我无法想出将它们组合在一起的方法，因为 TemplateRef 没有任何对其原始组件的引用，只有它的 DOM 注释节点。

我可以强制将原始组件的 ChangeDetectorRef 传递给弹出服务，但我想针对这种任意情况提出一个解决方案。任何建议将不胜感激!

Answer 1

好吧，我最后做的是创建一个指令:

<ng-template myDirective>
  Content
</ng-template>

然后在该指令中我注入(inject)了 TemplateRef和 ChangeDetectorRef .这样而不是给 TemplateRef到我需要那个模板的地方，我给ViewChild(MyDirective)并使用 myDirective.template作为模板并调用markForCheck()在 ngAfterViewChecked() 上的那个变化检测器上该组件的。