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>

Angular 2渲染组件在ngFor中

1 个答案: