当 TemplatePortal 附加到父 PortalOutlet 时，ExpressionChangedAfterItHasBeenCheckedError 在更改检测时抛出

Question

我有以下组件结构：App -> GrandParent -> Parent -> Child。

1. ChildComponennt 在其模板中声明了一个 <ng-template cdkPortal>。
2. AppComponent、GrandParentComponent 和 ParentComponent 各自在各自的模板中声明了一个 <ng-template cdkPortalOutput>。

现在，如果 ChildComponent 附加其门户 属性：

• ... 到 ParentComponent - 一切都按预期工作。您可以更新 input[text]，更改会很好地向下传播到 TemplatePortal。
• 到 GrandParentComponent - ExpressionChangedAfterItHasBeenCheckedError 在第一次更改检测 运行 期间被抛出。 input[text] 中的每个后续更新都会导致相同的错误。 TemplatePortal 的状态是 "one step behind"（意思是 - 如果我在输入中键入 "abc"，TemplatePortal 中的值等于 "ab"）
• AppComponent - 除了初始错误外，与 GrandParentComponent 的行为相同。

Stackblitz：https://stackblitz.com/edit/portal-cdk?file=src%2Fapp%2Fchild%2Fchild.component.ts（取消注释 ChildComponent#ngOnInit 中的调用）

有人对此行为有解释吗？使用 CDK 的门户在位于上面几个组件的 PortalOutlet 中显示 TemplatePortal 的正确方法是什么？

谢谢！

Answer 1

我无法找到您问题的解决方案，如果有人知道，我也很感兴趣，但至少我为您创建了解决方法。它不使用 cdk-portal，仅使用 Angular 的 viewContainerRef，但我相信 cdk-portal 使用类似的方法。

堆栈闪电战：https://stackblitz.com/edit/portal-cdk-uiyxhn （取消注释 ChildComponent#ngOnInit 中的调用）