Angular 5：如何将组件嵌入到另一个组件中答案

【问题标题】：Angular 5: How to embed a component into anotherAngular 5：如何将组件嵌入到另一个组件中
【发布时间】：2019-03-03 09:54:01
【问题描述】：

想象一下，我有一个带有可扩展行的通用表格组件，我需要从使用该表格的组件内将另一个动态内容（在本例中为动态 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 并没有得到解决方案。你有什么想法吗？

【问题讨论】：

看看这个：stackoverflow.com/questions/44284026/…

标签： angular typescript angular-components

【解决方案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>

谢谢@所有人

【讨论】：