我正在尝试获取一个在 <tr>
内重复的 Angular Directive(指令)。如果没有指令,代码是
<tr *ngFor='let cluster of clusters'>
<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
<span>{{ cluster.Name }}</span>
<span>{{ cluster.StatusMessage }}</span>
</td>
<td style='width: 100%;'>
...
</td>
</tr>
看起来像
当我重构该指令时,我丢失了 <tr>
格式化。重构后的代码为
<tr *ngFor='let cluster of clusters'>
<cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>
cluster-row组件代码为:
<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
<span>{{ name }}</span>
<span>{{ statusMessage }}</span>
</td>
<td style='width: 100%;'>
...
</td>
它可以工作,但是 <tr>
格式消失。
开发者工具显示 <tr>
与 <cluster-row>
嵌套在其中,还有两个 <td>
正如我所期望的那样,它嵌套在其中。
最佳答案
<tr>
不能包含<cluster-row>
元素。
您可以使用属性选择器,例如
<tr *ngFor='let cluster of clusters'>
<td cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>
与
@Component({
//@Directive({
selector: '[cluster-row]'
组件或指令是 <td>
,因此您不能在组件模板内重复它
style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'
可以直接添加到
@Component({
selector: '[cluster-row]',
styles: [...],
关于angular - 在 <tr> 中嵌入 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43124637/