有角度的HTML绑定
我正在编写一个Angular应用程序，并且我有一个我想要显示的HTML响应。
我怎么做？ 如果我简单地使用绑定语法{{myVal}}它将编码所有HTML字符（当然）。
我需要以某种方式将div的内部html绑定到变量值。
现在正确的语法如下：
<div [innerHTML]="theHtmlString"></div>
在5.2.9工作
文档参考
Angular 2.0.0和Angular 4.0.0 final
只是为了安全内容
<div [innerHTML]="myVal"></div>
DOMSanitizer
潜在的不安全HTML需要使用Angulars DOM清理工具显式标记为可信，因此不会剥去内容中潜在的不安全部分
<div [innerHTML]="myVal | safeHtml"></div>
与管道一样
@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 = `<div>{{bar}}</div>
<my-comp></my-comp>
<input [(ngModel)]="bar">`;
同
<div [innerHTML]="foo"></div>
不会导致Angular在foo处理任何角度特定的内容 。 Angular在构建时用生成的代码替换Angular特定的标记。 运行时添加的标记不会被Angular处理 。
要添加包含特定于Angular的标记（属性或值绑定，组件，指令，管道...）的HTML，需要在运行时添加动态模块和编译组件。 这个答案提供了更多的细节我怎样才能使用/创建动态模板来编译动态组件与Angular 2.0？
[innerHtml]在大多数情况下都是很好的选择，但是它在真正大字符串或者需要html中的硬编码样式时会失败。
我想分享其他方法：
所有你需要做的，就是在你的html文件中创建一个div并给它一些id：
<div #dataContainer></div>
然后，在你的Angular 2组件中，创建对这个对象的引用（TypeScript在这里）：
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
templateUrl: "some html file"
})
export class MainPageComponent {
@ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
}
然后只需使用loadData函数将一些文本附加到html元素。
这只是一种方式，你会使用原生JavaScript，但在Angular环境中。 我不推荐它，因为使代码更加混乱，但有时候没有其他选择。
另请参阅Angular 2 - innerHTML样式
链接地址: http://www.djcxy.com/p/31293.html上一篇: Angular HTML binding