在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的动态组件中解释的那样?

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

我认为最好从服务器端应用程序返回原始数据，并将其绑定到客户端模板。这使得请求更加灵活，因为您只从服务器返回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

<div [innerHTML]=“HtmlPrint”></div><br>

innerHtml是HTML-Elements的一个属性，它允许你以编程的方式设置它的html-content。还有一个innerText属性，它将内容定义为纯文本。

属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着，属性的值(在您的例子中是innerHtml)绑定到给定的表达式，当表达式结果改变时，属性值也会改变。

所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。

正确的语法如下:

<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);
    }
}

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