一尘不染

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

javascript

我正在努力寻找一种方法来做到这一点。在父组件中,模板描述了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- contentDynamicComponentLoaderViewContainerRef,但他们似乎并不至于我可以看到提供一个解决的办法。


阅读 438

收藏
2020-05-01

共1个答案

一尘不染

您可以使用属性选择器

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

然后像

<td myTd></td>
2020-05-01