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

Question

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

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

现在，如果ChildComponent附加了其portal属性：

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

Stackblitz： https ：//stackblitz.com/edit/portal-cdk ？ file = ssc %%Fapp％2Fchild％2Fchild.component.ts（取消注释ChildComponent#ngOnInit调用）

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

谢谢 ！

Answer 1

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

Stackblitz： https ：//stackblitz.com/edit/portal-cdk-uiyxhn（取消注释ChildComponent#ngOnInit调用）