我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
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中使用/创建动态模板来编译动态组件?
其他回答
动态添加元素到DOM的方法,正如在Angular 2文档中解释的那样,是使用@Angular/core中的ViewContainerRef类。
你要做的是声明一个指令,它将实现ViewContainerRef,并充当DOM上的占位符。
指令
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appInject]'
})
export class InjectDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
然后,在你想要注入组件的模板中:
HTML
<div class="where_you_want_to_inject">
<ng-template appInject></ng-template>
</div>
然后,从注入的组件代码中,注入包含你想要的HTML的组件:
import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
@ViewChild(InjectDirective) injectComp: InjectDirective;
constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
}
public addComp() {
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
const viewContainerRef = this.injectComp.viewContainerRef;
const componentRef = viewContainerRef.createComponent(componentFactory);
}
public removeComp() {
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
const viewContainerRef = this.injectComp.viewContainerRef;
const componentRef = viewContainerRef.remove();
}
}
我在Angular 2上添加了一个完全可用的演示应用,动态地将组件添加到DOM演示中
只需简单地使用[innerHTML]属性在你的HTML,如下所示:
<div [innerHTML]="myVal"></div>
你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作,但是innerHTML属性绑定会 救援。
使用{{myVal}}不能正常工作!这不会拾取HTML标签,如<p>, <strong>等,只将其作为字符串传递…
假设你的组件中有这样的代码:
碰到弦!弦!弦!< /埃隆·马斯克>”
如果你使用{{myVal}},你会在视图中得到这个:
<strong>Stackoverflow</strong> is <em>helpful!</em>
但是使用[innerHTML]="myVal"使结果像预期的那样:
Stackoverflow很有用!
为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>
在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的动态组件中解释的那样?
我们总是可以将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>