Angular 5: как встроить компонент в другой

Question

представьте себе, у меня есть общий компонент таблицы с расширяемыми строками, и мне нужно вставить другое динамическое содержимое (в данном случае динамический SVG) в эти расширяемые строки из компонента, который использует таблицу.

Пример:

my-table.component.html

// my-table-component

...

<ng-container matColumnDef="expandedDetail">

  <mat-cell *matCellDef="let detail; let i = index;">
    <ng-container>
      <div>

          <ng-content>here goes an SVG</ng-content>

      </div>
    </ng-container>

  </mat-cell>
</ng-container>

...

my-parent.component.html

  <my-table *ngIf="tableData" [dataSource]="tableData [tableConfig]="tableConfig">

    <!-- this should go to ng-content in my-table with row specific data -->
    <my-svg [data]="my--data | async" [options]="my-options"> </my-svg>

  </my-table>

Проблемы здесь заключаются в том, что

• , что ng-content только для статического содержимого, поэтому атрибут select не может содержать динамическийзначение.
• Содержимое содержит только последняя строка, поэтому динамический SVG виден только в последней строке.

Мы также пробовали ViewChild и templateRef и не нашли решения.У вас есть идеи?

Answer 1

Наконец, мы нашли решение, используя ngTemplateOutlet и условие ngIf:

Решение:

my-table.component.html

<ng-template #content><ng-content></ng-content></ng-template>
<div *ngIf="detail.element.expansionId == expandedElement">
   <ng-container *ngTemplateOutlet="content"></ng-container>
</div>

Спасибо @ all