我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。
有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。
在这部《斯塔克布利茨》中可以看到它的作用。
其他回答
我们总是可以将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 v2.1.1中工作
<div [innerHTML]="variable or htmlString">
</div>
只需简单地使用[innerHTML]属性在你的HTML,如下所示:
<div [innerHTML]="myVal"></div>
你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作,但是innerHTML属性绑定会 救援。
使用{{myVal}}不能正常工作!这不会拾取HTML标签,如<p>, <strong>等,只将其作为字符串传递…
假设你的组件中有这样的代码:
碰到弦!弦!弦!< /埃隆·马斯克>”
如果你使用{{myVal}},你会在视图中得到这个:
<strong>Stackoverflow</strong> is <em>helpful!</em>
但是使用[innerHTML]="myVal"使结果像预期的那样:
Stackoverflow很有用!
[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样式
这里已经提供了简短的回答:使用<div [innerHTML]="yourHtml">绑定。
然而,这里提到的其他建议可能具有误导性。当你绑定到这样的属性时,Angular有一个内置的清除机制。因为Angular不是一个专门的消毒库,所以它对可疑内容过于热心,不愿冒任何风险。例如,它将所有SVG内容清除为空字符串。
您可能会听到一些建议,通过使用DomSanitizer将内容标记为安全的bypassSecurityTrustXXX方法来“消毒”您的内容。也有使用管道的建议,该管道通常被称为safeHtml。
所有这些都是误导,因为它实际上绕过了消毒,而不是消毒你的内容。这可能是一个安全问题,因为如果您对用户提供的内容或任何您不确定的内容这样做,您就会为恶意代码攻击敞开大门。
如果Angular通过内置的清理功能删除了你需要的某些东西,你可以做的不是禁用它,而是将实际的清理工作委托给擅长这项任务的专用库。例如——DOMPurify。
我已经为它做了一个包装器库,这样就可以很容易地在Angular中使用它: https://github.com/TinkoffCreditSystems/ng-dompurify
它还有一个管道来声明式地净化HTML:
<div [innerHtml]="value | dompurify"></div>
与这里建议的管道的不同之处在于,它实际上通过DOMPurify进行消毒,因此适用于SVG。
编辑:Angular不再在Ivy渲染器中对CSS进行消毒,所以下面的信息(出于历史考虑)是不相关的:
要记住的一件事是,DOMPurify很适合净化HTML/SVG,但不适用于CSS。所以你可以提供Angular的CSS消毒器来处理CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
它是内部的——因此有了ɵ前缀,但这也是Angular团队在他们自己的包中使用它的方式。该库也适用于Angular Universal和服务器端渲染环境。