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

Angular 2+支持渲染HTML的[innerHTML]属性绑定。如果以其他方式使用插值，则它将被视为字符串。

转换成。html文件

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

导入.ts文件

theHtmlString:String = "enter your html codes here";

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

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

只需简单地使用[innerHTML]属性在你的HTML，如下所示:

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

你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作，但是innerHTML属性绑定会 救援。

使用{{myVal}}不能正常工作!这不会拾取HTML标签，如<p>， <strong>等，只将其作为字符串传递…

假设你的组件中有这样的代码:

碰到弦!弦!弦!< /埃隆·马斯克>”

如果你使用{{myVal}}，你会在视图中得到这个:

<strong>Stackoverflow</strong> is <em>helpful!</em>

但是使用[innerHTML]="myVal"使结果像预期的那样:

Stackoverflow很有用!

只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件，并且对它不能像我一样工作感到沮丧，可以看看我写的ngx-dynamic-hooks库来解决这个问题。

有了它，您可以从动态字符串/html加载组件，而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer，但保留了加载组件的能力(以一种安全的方式)。

在这部《斯塔克布利茨》中可以看到它的作用。

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

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