我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
<div [innerHTML]=“HtmlPrint”></div><br>
innerHtml是HTML-Elements的一个属性,它允许你以编程的方式设置它的html-content。还有一个innerText属性,它将内容定义为纯文本。
属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着,属性的值(在您的例子中是innerHtml)绑定到给定的表达式,当表达式结果改变时,属性值也会改变。
所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。
其他回答
只需简单地使用[innerHTML]属性在你的HTML,如下所示:
<div [innerHTML]="myVal"></div>
你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作,但是innerHTML属性绑定会 救援。
使用{{myVal}}不能正常工作!这不会拾取HTML标签,如<p>, <strong>等,只将其作为字符串传递…
假设你的组件中有这样的代码:
碰到弦!弦!弦!< /埃隆·马斯克>”
如果你使用{{myVal}},你会在视图中得到这个:
<strong>Stackoverflow</strong> is <em>helpful!</em>
但是使用[innerHTML]="myVal"使结果像预期的那样:
Stackoverflow很有用!
动态添加元素到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内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>
正确的语法如下:
<div [innerHTML]="theHtmlString"></div>
文档参考
你可以为样式、链接和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);
}
}
这将在不影响任何样式和链接单击事件的情况下应用