我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。
例如:<div [innerHTML]="theHtmlString"></div>
使用规范形式如下:
<div bind-innerHTML="theHtmlString"></div>
Angular文档:https://angular.io/guide/template-syntax#property-binding-property
参见工作stackblitz示例
其他回答
动态添加元素到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演示中
你可以为样式、链接和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);
}
}
这将在不影响任何样式和链接单击事件的情况下应用
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[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 ()
例子
在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的动态组件中解释的那样?