Angular 2渲染内部组件ngFor

问题描述：

所以我有一个组件标签。每个选项卡我放在他们自己的组件中，即TabOneComponent ... TabTenComponent。然后，以显示他们，我决定把它们放在组件内的阵列，将使其像这样：Angular 2渲染内部组件ngFor

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>实际上是有它只是没有呈现实际的组件模板。

退房http://stackoverflow.com/questions/33472297/how-to-translate-html-string-to-real-html-element-by-ng-for-in-angular-2 – Dan

确保你已经宣布你的管道在你的组件 – Dan

看到这个答案http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 – yurzui

答

看看是否有效。

<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>

否它没有。将类和id更改为角度属性的目的是什么？即使只使用普通的HTML类和标识符，它们也能正常工作。这是innerHTML不起作用。请参阅我更新的帖子。 – Jed

Angular 2渲染内部组件ngFor

相关推荐