当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的状态为“落后一步”（意味着-如果我在输入中输入“ 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使用类似的方法。

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