我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
如果[innerHTML]包含用户创建的内容,直接使用[innerHTML]而不使用Angular的DOM消毒器是不可取的。@GünterZöchbauer在他的回答中建议的safeHtml管道是一种净化内容的方法。下面的指令是另一个指令:
import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
SimpleChanges } from '@angular/core';
// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
@Input() safeHtml: string;
constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}
ngOnChanges(changes: SimpleChanges): any {
if ('safeHtml' in changes) {
this.elementRef.nativeElement.innerHTML =
this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
}
}
}
被使用
<div [safeHtml]="myVal"></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样式
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。
有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。
在这部《斯塔克布利茨》中可以看到它的作用。
你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。
例如:<div [innerHTML]="theHtmlString"></div>
使用规范形式如下:
<div bind-innerHTML="theHtmlString"></div>
Angular文档:https://angular.io/guide/template-syntax#property-binding-property
参见工作stackblitz示例
如果[innerHTML]包含用户创建的内容,直接使用[innerHTML]而不使用Angular的DOM消毒器是不可取的。@GünterZöchbauer在他的回答中建议的safeHtml管道是一种净化内容的方法。下面的指令是另一个指令:
import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
SimpleChanges } from '@angular/core';
// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
@Input() safeHtml: string;
constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}
ngOnChanges(changes: SimpleChanges): any {
if ('safeHtml' in changes) {
this.elementRef.nativeElement.innerHTML =
this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
}
}
}
被使用
<div [safeHtml]="myVal"></div>