我正在努力寻找一种方法来做到这一点。在父组件中，模板描述了一个＜code＞table＜/code＞及其＜code＞thead＜/code｝元素，但将＜code＞tbody＜/code＜委托给另一个组件，如下所示：
<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 组件实际上比此处显示的要复杂得多，因此我想将其行为放在单独的组件和文件中。
生成的 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>
有没有任何方法可以让我们呈现相同的东西，但没有包装＜code＞
我看过ng-content、DynamicComponentLoader和ViewContainerRef，但据我所见，它们似乎没有提供解决方案。
您可以使用属性选择器
@Component({
selector: '[myTd]'
...
})
然后像这样使用它
<td myTd></td>
您需要“ViewContainerRef ”,并在my-result组件中执行如下操作:
.html：
<ng-template #template>
<tr>
<td>Lisa</td>
<td>333</td>
</tr>
</ng-template>
<代码>。ts:
@ViewChild('template', { static: true }) template;
constructor(
private viewContainerRef: ViewContainerRef
) { }
ngOnInit() {
this.viewContainerRef.createEmbeddedView(this.template);
}
您可以尝试使用新的css＜code＞display：contents＜/code＞
这是我的工具栏scs：
:host {
display: contents;
}
:host-context(.is-mobile) .toolbar {
position: fixed;
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
z-index: 2;
}
h1.app-name {
margin-left: 8px;
}
以及html:
<mat-toolbar color="primary" class="toolbar">
<button mat-icon-button (click)="toggle.emit()">
<mat-icon>menu</mat-icon>
</button>
<img src="/assets/icons/favicon.png">
<h1 class="app-name">@robertking Dashboard</h1>
</mat-toolbar>
使用中：
<navigation-toolbar (toggle)="snav.toggle()"></navigation-toolbar>
