我正在写一个Angular应用程序,我有一个HTML响应,我想显示。

我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。

我需要以某种方式将一个div的innerHTML绑定到变量值。


当前回答

如果我错过了重点,我很抱歉,但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据,并将其绑定到客户端模板。这使得请求更加灵活,因为您只从服务器返回json。

对我来说,如果你所做的只是从服务器获取html并将其“原样”注入到DOM中,那么使用Angular似乎没有意义。

我了解Angular 1。x有一个html绑定,但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样,我还是会考虑为你的Angular 2.0应用提供一个数据api。

如果您感兴趣的话,这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

其他回答

你可以为样式、链接和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);
    }
}

这将在不影响任何样式和链接单击事件的情况下应用

如果我错过了重点,我很抱歉,但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据,并将其绑定到客户端模板。这使得请求更加灵活,因为您只从服务器返回json。

对我来说,如果你所做的只是从服务器获取html并将其“原样”注入到DOM中,那么使用Angular似乎没有意义。

我了解Angular 1。x有一个html绑定,但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样,我还是会考虑为你的Angular 2.0应用提供一个数据api。

如果您感兴趣的话,这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:

<div [innerHTML]="myVal"></div>

根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):

演讲

<div id="test"></test>

组件

var p = document.getElementsById("test");
p.outerHTML = myVal;

属性绑定

Javascript DOM外部HTML

如果你想在Angular 2或Angular 4中使用它,同时还想保持内联CSS,那么你可以使用它

<div [innerHTML]="theHtmlString | keepHtml"></div>

为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:

<div [innerHTML]=componentVariableThatHasTheHtml></div>