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>