我正在努力寻找一种方法来做到这一点。在父组件中,模板描述了table及其thead元素,但将渲染委托tbody给了另一个组件,如下所示:
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
<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>标签,并且仍然使用仅由组件负责表行的渲染?
<my-result>
我已经看过了ng- content,DynamicComponentLoader的ViewContainerRef,但他们似乎并不至于我可以看到提供一个解决的办法。
ng- content
DynamicComponentLoader
ViewContainerRef
您可以使用属性选择器
@Component({ selector: '[myTd]' ... })
然后像
<td myTd></td>