嵌入Angular指令

时间:2017-03-30 17:28:52

标签: angular angular2-template angular2-directives

我试图获得一个角度指令在<tr>内重复。没有指令,代码是

<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>

看起来像

enter image description here

当我重构指令时,我失去了<tr>格式。重构的代码是

<tr *ngFor='let cluster of clusters'>
    <cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>

群集行组件代码是:

<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>格式消失了。

enter image description here

开发人员工具显示<tr>嵌套了<cluster-row>,其中嵌套了两个<td>,正如我所料。

1 个答案:

答案 0 :(得分:3)

<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: [...],