我在我的一个项目中使用 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
。怎么办?请帮忙。
最佳答案
假设您使用的工具提示指令不是结构指令,您可以使用*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 并采用确定约束所需的任何参数。
关于angular - 将自定义指令动态添加到组件中的 ng-template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48420709/