Angular2を使用してdiv要素にhtmlコードを追加する方法

Question

divがあり、Angular2を使用する変数にhtmlコードを追加する必要があります。

import {Component,Input,ViewChild,ElementRef,OnInit} from 'angular2/core'; 

@Component({ 
    selector: 'my-view', 
    template: ` 
    <div #myDiv>{{str}}</div> 
`, 
    styleUrls:['src/css/thedata.css'] 
}) 
    export class AngularComponent{ 
       private str = "<div class='EachWidget FL'><div class='WidgetDataParent'><div class='widgetTitleBar'></div></div></div>"; 

     } 

myDivという名前のdivにstr stringをhtmlとして追加する必要があります。

Answer 1

次のようなinnerHTML属性にバインドすることができます。

import {Component,Input,ViewChild,ElementRef,OnInit} from 'angular2/core'; 

@Component({ 
    selector: 'my-view', 
    template: ` 
    <div [innerHTML]="str" #myDiv></div> 
`, 
    styleUrls:['src/css/thedata.css'] 
}) 
export class AngularComponent{ 
    private str = "<div class='EachWidget FL'><div class='WidgetDataParent'><div class='widgetTitleBar'></div></div></div>"; 

}