ngFor 中的 Angular 2 渲染组件

Question

所以我的一个组件上有标签。我将每个选项卡放入自己的组件中，即 TabOneComponent...TabTenComponent。然后为了显示它们，我决定将它们放在组件内的一个数组中，这样它们将呈现如下：

tabs: Array<any> = [
  {label: 'Tab One', id: 'tabone', class: 'active', template: '<tab-one></tab-one>'}
  ...
  {label: 'Tab Ten', id: 'tabten', template: '<tab-ten></tab-ten>'}
]

然后为了显示它们，我创建了一个像这样的 ngFor：

<div class='tab-content'>
   <div *ngFor="let t of tabs" class='tab-pane {{ t.class }}' id='{{ t.id }}' [innerHTML]="t.template | htmlSanitizer">
   </div>
<div>

注意： htmlSanitizer 是我创建的一个管道，它正在工作。

这里的问题是每个组件的模板都没有渲染。那么是否可以这样做，或者我真的需要单独放置：

<div class="tab-pane active" id="tabone">
  <tab-one></tab-one>
</div>
...
<div class="tab-pane" id="tabten">
  <tab-ten></tab-ten>
</div>

提前致谢！

编辑

当我在 Chrome 中的元素选项卡下进行检查时，我看到 <tab-one></tab-one> 到 <tab-ten></tab-ten> 实际上在那里它只是没有呈现实际的组件模板。

Answer 1

看看这是否有效。

<div class="tab-content">

    <div *ngFor="let t of tabs">
        <div [attr.class] = "t.class tab-pane"
             [attr.id]    = "t.id"
             [innerHTML]  = "t.template | htmlSanitizer">
        </div>
    </div>

</div>