我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>
其他回答
这里已经提供了简短的回答:使用<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和服务器端渲染环境。
在angular2@2.0.0-alpha.44:
当使用{{插值}}时,html绑定将不起作用,请使用“表达式”来代替:
无效的
<p [innerHTML]="{{item.anleser}}"></p>
->抛出错误(插值而不是期望的表达式)
正确的
<p [innerHTML]="item.anleser"></p>
->这是正确的方式。
你可以在表达式中添加额外的元素,比如:
<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>
hint
使用[innerHTML]添加的HTML(或通过其他方式如element. appendchild()或类似方式动态添加的HTML)不会被Angular以任何方式处理,除非出于安全目的进行消毒。 只有当HTML被静态地添加到组件模板中时,这些事情才会起作用。如果你需要这个,你可以在运行时创建一个组件,就像在如何使用/创建动态模板来编译Angular 2.0的动态组件中解释的那样?
只需简单地使用[innerHTML]属性在你的HTML,如下所示:
<div [innerHTML]="myVal"></div>
你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作,但是innerHTML属性绑定会 救援。
使用{{myVal}}不能正常工作!这不会拾取HTML标签,如<p>, <strong>等,只将其作为字符串传递…
假设你的组件中有这样的代码:
碰到弦!弦!弦!< /埃隆·马斯克>”
如果你使用{{myVal}},你会在视图中得到这个:
<strong>Stackoverflow</strong> is <em>helpful!</em>
但是使用[innerHTML]="myVal"使结果像预期的那样:
Stackoverflow很有用!
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。
有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。
在这部《斯塔克布利茨》中可以看到它的作用。
在Angular 2中,你可以做3种类型的绑定:
[property]="expression" ->任何html属性都可以链接到 表达式。在这种情况下,如果表达式更改属性将更新, 但反过来就行不通了。 (event)="expression" ->当事件激活时执行表达式。 [(ngModel)]="property" ->将属性从js(或ts)绑定到html。在此属性上的任何更新都将随处可见。
表达式可以是值、属性或方法。例如:'4','controller。var, getValue ()
例子