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

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

         }

从'angular2/core'导入{Component，Input，ViewChild，ElementRef，OnInit}；
@组成部分({
选择器：“我的视图”，
模板：`
{{str}}
`,
样式URL:['src/css/thedata.css']
})
导出类AngularComponent{
私人str=“”；
}

---

我必须将str字符串作为html添加到名为myDiv的div中。

您可以像这样绑定到

innerHTML

属性：

从'angular2/core'导入{Component，Input，ViewChild，ElementRef，OnInit}；
@组成部分({
选择器：“我的视图”，
模板：`
`,
样式URL:['src/css/thedata.css']
})
导出类AngularComponent{
私人str=“”；
}

谢谢。我还有一个疑问。我通过innerHTML添加了一个div，它具有（单击）功能。但当我点击该按钮时，它不起作用。

private str=“”是的，这不起作用。你只能在真实的模板代码上有事件绑定。但是，你可以动态添加组件——看看这个：从技术上讲，innerHtml不附加，而是替换html。尽管OP在这里使用了错误的动词，但你可以猜到他查看代码的意思。