Как динамически создать компонент внутри дочернего компонента в Angular?

Question

Я пытаюсь реализовать что-то вроде облегченной версии mat-table form Angular Material. И я не могу создать компонент внутри дочернего компонента. Вот код и ссылка на stackblitz в конце.

В каком-то *.html файле:

<table uiTable></table>

Базовый компонент UiTable:

// ui-table.component.ts

@Component({
  selector: 'table[uiTable]',
  template: `
    <thead uiTableHead></thead>
  `,
})
export class UiTableComponent implements AfterContentInit {

  @ViewChild(UiTableHeadDirective, {static: true}) 
  private tableHead: UiTableHeadDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
  ) {}

  public ngAfterContentInit() {
    const rowFactory = this.componentFactoryResolver.resolveComponentFactory(UiTableRowComponent);

    this.tableHead.viewContainer.clear();
    this.tableHead.viewContainer.createComponent(rowFactory);
  }

}

ui-table-head.directive и ui-table-row.component - просто пустая директива angular и компонент с введенным ViewContainerRef.

Я ожидаю, что после того, как ngAfterContentInit будет выполнено, я получу что-то вроде

<table uiTable>
    <thead uiTableHead>
        <tr uiTableRow></tr>
    </thead>
</table>

Но вместо этого из этого я получаю

<table uiTable>
    <thead uiTableHead></thead>
    <tr uiTableRow></tr>
    <!--container-->
    <!--container-->
</table>

Почему? Я вызываю метод createComponent из tableHead.viewContainer, но новый компонент создает внутри uiTable. Что не так?

Ссылка на Stackblitz - https://stackblitz.com/edit/ui-table

Answer 1

Вы можете перенаправить свой динамически созданный компонент дочерним элементам, используя следующий фрагмент:

const componentRef = this.tableHead.viewContainer.createComponent(rowFactory);
this.tableHead.viewContainer.element.nativeElement
                .appendChild(componentRef.location.nativeElement);

Forked Stackblitz