ExpressionChangedAfterItHasBeenCheckedError, генерируемая при обнаружении изменений, когда TemplatePortal присоединяется к родителям PortalOutlet

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 для отображения TemplatePortal в PortalOutlet, расположенном несколькими компонентами выше?

Спасибо!

Answer 1

Я не смог найти решение вашей проблемы, и если кто-то знает, я тоже заинтересован, однако, по крайней мере, я создал обходной путь для вас.Он не использует cdk-portal, просто Angular viewContainerRef, но я верю, cdk-portal использует аналогичный подход.

Stackblitz: https://stackblitz.com/edit/portal-cdk-uiyxhn (раскомментируйте вызовы в ChildComponent#ngOnInit)