在 <tr> 中嵌入 Angular 指令答案

【问题标题】：Embedding an Angular Directive in <tr>在 <tr> 中嵌入 Angular 指令
【发布时间】：2017-03-30 17:28:52
【问题描述】：

我试图让一个角度指令在<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>

看起来像

当我重构指令时，我失去了<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>，正如我所料。

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

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

【讨论】：

这是因为<tr> 只能包含<td> 吗？我希望能够单击该行来切换由指令管理的不同视图。
不确定“单击行以切换不同视图，由指令管理”是什么意思。我的回答是关于<tr> 不支持除<td> 之外的其他孩子。
您可以在组件内部使用*ngIf或*ngSwitchCase来显示不同的内容。
当我的意思是“组件”时，我想我是在使用“指令”。在学习 Angular 1 之后，我正在学习 Angular 2。
我明白了。如果这可以满足您的要求，那也很好。