如何在 Angular 的子组件内动态创建组件？

Question

I am trying to implement something like light version of mat-table form Angular Material. And i can't create component inside child component. Here is some code and link to stackblitz at the end.

In some *.html file:

<table uiTable></table>

Base UiTable component:

// 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 and ui-table-row.component - just empty angular directive and component with injected ViewContainerRef .

I expect that after ngAfterContentInit is done I will get something like

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

But instead of it i get

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

Why? I call createComponent method from tableHead.viewContainer , but new component creates inside uiTable . What's wrong?

Stackblitz link - https://stackblitz.com/edit/ui-table

Answer 1

You can forward your dynamically created component to children by using the following snippet:

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

Forked Stackblitz