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

javascript angular

2022-08-30 02:26:04

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

<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 看起来很糟糕。我相信这是因为它是无效的，因为它只能包含元素（参见MDN），但我生成的（简化的）DOM是：tbodytr

<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

答案 1

您可以使用属性选择器

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

然后像这样使用它

<td myTd></td>

答案 2

你需要“ViewContainerRef”，然后在 my-result 组件中执行如下操作：

html：

<ng-template #template>
    <tr>
       <td>Lisa</td>
       <td>333</td>
    </tr>
 </ng-template>

ts：

@ViewChild('template') template;


  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    this.viewContainerRef.createEmbeddedView(this.template);
  }