Angular2：渲染没有包装标签的组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在努力寻找一种方法来做到这一点。在父组件中，模板描述了table及其thead元素，但将渲染委托tbody给了另一个组件，如下所示：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

每个myResult组件都呈现其自己的tr标签，基本上是这样的：

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

我之所以没有将其直接放在父组件中（避免需要使用myResult组件）是因为myResult组件实际上比此处显示的要复杂，因此我想将其行为放在单独的组件和文件中。

产生的DOM看起来很糟。我相信这是因为它无效，因为它tbody只能包含tr元素（请参阅MDN），但是我生成的（简化的）DOM是：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

有什么方法可以使我们得到相同的结果，但是没有包装<my-result>标签，并且仍然使用仅由组件负责表行的渲染？

我已经看过了ng-

content，DynamicComponentLoader的ViewContainerRef，但他们似乎并不至于我可以看到提供一个解决的办法。

回答：

您可以使用属性选择器

@Component({
  selector: '[myTd]'
  ...
})

然后像

<td myTd></td>

以上是 Angular2：渲染没有包装标签的组件 的全部内容， 来源链接： utcz.com/qa/411966.html

回到顶部