Проецировать дочерний компонент в родительский с использованием портала angular/material
Можно ли спроектировать содержание дочернего шаблона в родителях? <ng-content>
используя порталы в Angular? У меня есть простой дочерний компонент, который обернут родительским компонентом с помощью <ng-template>
:
<ng-template [cdkPortalOutlet]="parentPortal">
<p>This should be projected into parent</p>
</ng-template>
И родительский элемент - это простой компонент, который отображает заголовок и дочерний элемент:
<div>
<h1>{{ title }}</h1>
<ng-content></ng-content>
</div>
Я делаю портал Parent в OnInit
крючок жизненного цикла:
ngOnInit() {
this.parentPortal = new ComponentPortal(ParentComponent);
this.parentPortal.component.ngBaseDef.inputs.title = 'This is new title';
}
В угловых / материальных документах предлагается сделать это в AfterViewInit
но потом я получаю
Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: 'portal: undefined'. Текущее значение: 'portal: [object Object]'.
Тем не менее, ничего не отображается и не отображается ошибка. Это возможно сделать, и почему ничего не рендеринг? Полный пример на стеклец.