angular - 将自定义指令动态添加到组件中的 ng-template

Question

我在我的一个项目中使用 angular 4，我有一种情况，我正在使用 ng-template 来呈现我的表格行，如下所示。

//我的行组件.component.ts

 <tr>
<ng-template  [ngTemplateOutlet]="rowTemplate" [ngTemplateOutletContext]="{ row: data}">
</ng-template>
</tr>

其中 rowTemplate 是类的输入属性。而这个组件将被用作

<table>
<my-row-component [rowTemplate] = "rowTemplate2"></my-row-component>
</table>
<ng-template #rowTemplate2 let-row="row">
     <td [innerHTML]="row.id"></td>
     <td [innerHTML]="row.displayName"></td>
     <td [innerHTML]="row.location"></td>
 </ng-template>

现在的问题是我必须添加一个工具提示，它将在动态悬停每个 td 时显示。我不能直接在模板 td 上使用工具提示，我必须在 my--row-component 中动态添加指令，因为我有其他限制不允许我直接在每个模板上使用它td。怎么办？请帮忙。

Answer 1

假设您使用的工具提示指令不是结构指令，您可以使用*ngIf。

在 my-row-component.component.ts 上公开一个对象 say constraintObject，它将用于查看约束并决定是否应用指令。将此对象传递给行模板上下文:

<tr>
  <ng-template  [ngTemplateOutlet]="rowTemplate" [ngTemplateOutletContext]="{row: data, constraints: constraintObject}">
  </ng-template>
</tr>

在行模板内使用*ngIf(这里我只将它应用在位置列):

<ng-template #rowTemplate2 let-row="row" let-constraints="constraintObject">
     <td [innerHTML]="row.id"></td>
     <td [innerHTML]="row.displayName"></td>

     <td *ngIf="constraints.applyTooltipe(row.location)" [tooltipDirective]
          [innerHTML]="row.location"></td>
     <td *ngIf="!constraints.applyTooltipe(row.location)"
          [innerHTML]="row.location"></td>
</ng-template>

您可以在 constraintObject 上实现 applyTooltipe 方法，该方法将返回 true 或 false 并采用确定约束所需的任何参数。