Question

我正在为我的一个项目使用角度4，我有一种情况，我使用ng-template来渲染我的表行如下。

// my-row-component.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中动态添加指令，因为我有其他约束，不允许我直接在每个{{ {1}}。怎么去这个？请帮忙。

Answer 1

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

在 my-row-component.component.ts 上公开一个对象说 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 ，并获取确定约束所需的任何参数。< / p>

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

1 个答案: