HTML代碼形成Angular2組件屬性

Question

通過示例生成來自http://valor-software.com/ng2-bootstrap/的 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代碼。 有沒有辦法做到這一點？ 我的tabs數組看起來像這樣：

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通過這種方式添加了像[] ， () ， {{}} ， <my-comp> ， <div myDirective>這樣的<div myDirective> 。

Answer 2

純HTML注入：

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

Angular2模板/組件不能以與上面相同的方式注入，您可以將內容包裝到組件中並使用由(select)事件觸發的DynamicComponentLoader加載它。