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

角度5：如何将组件嵌入另一个组件

1 个答案: