如何使用Angular2 {h}代码将html代码附加到div元素

时间:2016-06-28 07:08:30

标签: javascript html angular angular2-template

我有一个div,我必须添加一些变量的HTML代码,使用Angular2。

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字符串作为html。

1 个答案:

答案 0 :(得分:3)

您可以像这样绑定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>";

}