自定义 Angular 组件不会在模板中呈现为 TR

Posted 2023-03-05

【中文标题】自定义 Angular 组件不会在模板中呈现为 TR

【英文标题】：Custom Angular component doesn't get rendered as TR in the template

【发布时间】：2017-10-06 06:46:59

【问题描述】：

我正在重新设计一个表格，我想引入我自己的自定义组件，而不是默认的 TR 元素。该表按预期工作，看起来像这样。

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">column.title</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of this.rows"></tr>
  </tbody>
</table>

然后，我引入了我自己的组件来替换通常的 TR，并将网格的标记切换为以下内容。

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">column.title</th></tr>
  </thead>
  <tbody>
    <row *ngFor="let row of this.rows" [value]="row" [formats]="columns"></row>
  </tbody>
</table>

新组件的标记非常简陋，如下所示。

<td *ngFor="let format of formats">
  value[format.id]
</td>

它确实有效。 IE。我可以看到值但所有生成的 TD（我可以确认检查 devtools）都呈现在表的第一列中。所以数据绑定有效。标记的生成工作。唯一失败的是愚蠢的浏览器没有得到 ROW 应该是一行（就像 TR 一样）。它认为可以将其渲染为单个 TD。

我如何告诉愚蠢的浏览器按我的意思做，而不是按我说的做？

【参考方案1】：

我认为这是因为它无法将 row 识别为 tr，因此无法正确渲染 table。

尝试像这样使用您的组件：

@Component( 
   selector: '[row]',
   template: `
   <td *ngFor="let format of formats">
      value[format.id]
   </td>
   ` 
)

然后在你的桌子上：

<tr row></tr>

这样，每个人都会将tr 识别为tr，但它的行为会像您希望的那样：使用您的row 组件。

（我在使用自定义菜单元素时遇到了同样的问题。它无法识别 li 元素。使用 <li my-element> 解决了这个问题。）

【讨论】：

“这叫做属性指令” 不，不是。为什么仅仅因为选择器发生了变化，你就将组件称为其他东西？

@zeroflagL 确实，在阅读了您的评论后，我意识到我只是更改了调用组件的方式，我没有使用 @Directive 来创建一个实际的 Attribute 指令。他的组件仍然是一个组件，因为它使用@Component，即使它被调用就好像它是一个指令一样。感谢您指出。

@zeroflagL 你是说这个建议有缺陷吗？以我现在的困惑程度，我真的不敢说。我接受了答复，因为它解决了 - 列现在按预期呈现。但是，我担心我正在学习错误的模式（也为未来的用户留下了他们可能依赖并不断犯错的痕迹）。你怎么看？

@KonradViltersten 不，是我写了“这被称为属性指令”，这是不正确的，他指出了这一点，我从我的答案中删除了它。为什么我在之前的评论中解释的那句话是不正确的。如果您想保持 html 标记的完整性，则将组件作为属性调用 是一种常见的做法。所以，别担心。只要意识到通过调用你的组件就像它是一个指令并不会使它成为一个属性指令：angular.io/docs/ts/latest/guide/attribute-directives.html