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

Question

我有一个 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。

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

}

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

How to append html code to div element using Angular2

html

javascript

angular2-template

angular