angular追加html,Angular HTML绑定

Angular 2.0.0和Angular 4.0.0 final

仅为了安全的内容

DOMSanitizer

潜在的不安全HTML需要使用Angulars DOM清理程序明确标记为受信任，因此不会删除内容中可能不安全的部分

用管子@Pipe({name: 'safeHtml'})export class Safe {

constructor(private sanitizer:DomSanitizer){}

transform(style) {

return this.sanitizer.bypassSecurityTrustHtml(style);

//return this.sanitizer.bypassSecurityTrustStyle(style);

// return this.sanitizer.bypassSecurityTrustXxx(style); - see docs

}}

安全警告

信任用户添加的HTML可能会带来安全风险。前面提到的文档陈述：调用任何bypassSecurityTrust...API会禁用Angular对传入值的内置清理。仔细检查并审核进入此调用的所有值和代码路径。确保为此安全上下文适当地转义任何用户数据。有关详细信息，请参阅“ 安全指南”。

角度标记

就像是class FooComponent {

bar = 'bar';

foo = `

{{bar}}

`;

同

不会导致Angular处理Angular特定的任何内容foo。Angular使用生成的代码替换构建时的Angular特定标记。Angular不会处理运行时添加的标记。

要添加包含特定于角度的标记(属性或值绑定，组件，指令，管道......)的HTML，需要在运行时添加动态模块和编译组件。这个答案提供了更多细节如何使用/创建动态模板来使用Angular 2.0编译动态组件？