HTML代码表单Angular2组件属性

Question

以下是使用ng2引导程序生成选项卡视图的示例http://valor-software.com/ng2-bootstrap/，我有以下代码：

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)">
    {{tabz?.content}}
</tab>

但是我希望从｛｛tabz？.content｝｝属性中提取HTML代码。有办法做到这一点吗？我的选项卡阵列如下所示：

public tabs:Array<any> = [
{title: 'Summary View', content: 'Dynamic content 1', active: true},
{title: 'Search View', content: '<someAngularComponent>Error Displaying Entry view</someAngularComponent >'}];

Answer 1

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)"
     [innerHTML]="tabz?.content">
</tab>

您应该知道Angular不会对HTML进行净化，也不会以任何其他方式处理它。Angular通过这种方式添加HTML来忽略像[]、()、{{}}、<my-comp>、<div myDirective>这样的绑定。

Answer 2

普通html注入：

<tab [innerHTML]="tabz?.content">

Angular2模板/组件不能以与上述相同的方式注入，您可以将内容包装到组件中，并使用(select)事件触发的DynamicComponentLoader加载它。