html 绑定数据代码,角度HTML绑定

匿名用户

Angular 2.0.0和Angular 4.0.0 final

对于安全内容

DOMSANITIZER

需要使用Angulars DOM sanitizer将潜在的不安全HTML显式标记为受信任，这样就不会剥离内容中潜在的不安全部分

用一根像这样的管子@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

}

}

请参见RC.1中的某些样式不能使用绑定语法添加

和文档:https://angular.io/api/platform-browser/domsanitizer

安全警告

信任用户添加的HTML可能会带来安全风险。 上述文件指出:

调用任何BypassSecurityTrust...API都会禁用Angular对传入值的内置清理。 仔细检查和审核进入此调用的所有值和代码路径。 确保对此安全上下文适当转义了任何用户数据。 有关更多详细信息，请参阅《安全指南》。

角度标记

类似于class FooComponent {

bar = 'bar';

foo = `

{{bar}}

`;

与

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

要添加包含Angular特定标记(属性或值绑定，组件，指令，管道等)的HTML，需要在运行时添加动态模块并编译组件。 这个答案提供了更多的细节，我如何使用/create dynamic template用Angular 2.0编译动态组件？