當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調用）