我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
你可以为样式、链接和HTML应用多个管道,如下所示。HTML
<div [innerHTML]="announcementContent | safeUrl| safeHtml">
</div>
在.ts管道中为“URL”消毒器
import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
用于“HTML”消毒器的管道
import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
这将在不影响任何样式和链接单击事件的情况下应用
其他回答
我们总是可以将html内容传递给innerHTML属性以呈现html动态内容,但动态html内容也可能被感染或恶意。因此,在将动态内容传递给innerHTML之前,我们应该始终确保内容是经过消毒的(使用DOMSanitizer),这样我们就可以逃脱所有恶意内容。
试试下面的管子:
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
Usage:
<div [innerHTML]="content | safeHtml"></div>
Angular 2.0.0和Angular 4.0.0 final
对于安全的内容
<div [innerHTML]="myVal"></div>
DOMSanitizer
潜在的不安全HTML需要使用angular的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">`;
with
<div [innerHTML]="foo"></div>
不会导致Angular在foo中处理任何特定于Angular的东西。 Angular在构建时用生成的代码替换Angular特定的标记。在运行时添加的标记不会被Angular处理。
要添加包含特定于angular的标记(属性或值绑定、组件、指令、管道等)的HTML,需要添加动态模块并在运行时编译组件。 如何在Angular 2.0中使用/创建动态模板来编译动态组件?
<div [innerHTML]=“HtmlPrint”></div><br>
innerHtml是HTML-Elements的一个属性,它允许你以编程的方式设置它的html-content。还有一个innerText属性,它将内容定义为纯文本。
属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着,属性的值(在您的例子中是innerHtml)绑定到给定的表达式,当表达式结果改变时,属性值也会改变。
所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。
在Angular v2.1.1中工作
<div [innerHTML]="variable or htmlString">
</div>
您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:
<div [innerHTML]="myVal"></div>
根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):
演讲
<div id="test"></test>
组件
var p = document.getElementsById("test");
p.outerHTML = myVal;
属性绑定
Javascript DOM外部HTML