如何在我的模板(Angular2/TypeScript）中将HTML字符串转换为HTML

How can I convert strings of HTML into HTML in my template (Angular2/TypeScript)?

本文关键字：HTML 中将 TypeScript 字符串 转换 Angular2 我的      更新时间：2023-09-26

我在dummy-data.ts文件中有这个对象。通过一项服务，我成功地将其拉入app.component.ts。

{name:"Object1", 
    prop1: {key:'value', key:'value'},
    password: "P@ssword1",
    htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>'
}

目前app.component.ts看起来是这样的，简单地说：

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
        <p *ngFor="#plot of plots">
            {{plot.personalPanelText.transition}}
        </p>
`,
providers: [PlotService]  
})

最终结果是字符串而不是HTML。我希望HTML是代码，而不是带有HTML标记的文本。

我试过几种方法，在全世界的篮网和Angular2的医生那里寻找，但都找不到解决方案。

提前感谢！

您可以绑定到innerHtml，如：

<div [innerHtml]="someProp.htmlText"></div>

Angular不会实例化任何与HTML中的标记或属性匹配的选择器以这种方式添加的组件，也不会解析任何绑定（如{{xx}}）

另请参阅如何在Angular2 中绑定原始html

相关文章：