Можно ли проецировать содержимое дочернего шаблона в родителей <ng-content>
с помощью Portals in 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]'.
Однако ничего не отображается и не отображается ошибка.Это возможно сделать, и почему ничего не рендеринг? Полный пример представлен на стеке .