Проецировать дочерний компонент в родительский с использованием портала 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]'.

Тем не менее, ничего не отображается и не отображается ошибка. Это возможно сделать, и почему ничего не рендеринг? Полный пример на стеклец.

0 ответов

Другие вопросы по тегам