[innerHtml]在大多数情况下是一个很好的选择，但当你需要在html中硬编码样式时，它会失败。

我想分享其他方法:

你所需要做的就是在你的html文件中创建一个div，并给它一个id:

<div #dataContainer></div>

然后，在你的Angular 2组件中，创建对这个对象的引用(这里是TypeScript):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

然后简单地使用loadData函数将一些文本附加到html元素。

这只是一种使用原生javascript的方式，但在Angular环境中。我不推荐这样做，因为这会使代码更加混乱，但有时也没有其他选择。

另见Angular 2 - innerHTML样式

你可以使用以下两种方法。

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

or

<div innerHTML="{{myVal}}"></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);
    }
}

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

正确的语法如下:

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

文档参考

这里已经提供了简短的回答:使用<div [innerHTML]="yourHtml">绑定。

然而，这里提到的其他建议可能具有误导性。当你绑定到这样的属性时，Angular有一个内置的清除机制。因为Angular不是一个专门的消毒库，所以它对可疑内容过于热心，不愿冒任何风险。例如，它将所有SVG内容清除为空字符串。

您可能会听到一些建议，通过使用DomSanitizer将内容标记为安全的bypassSecurityTrustXXX方法来“消毒”您的内容。也有使用管道的建议，该管道通常被称为safeHtml。

所有这些都是误导，因为它实际上绕过了消毒，而不是消毒你的内容。这可能是一个安全问题，因为如果您对用户提供的内容或任何您不确定的内容这样做，您就会为恶意代码攻击敞开大门。

如果Angular通过内置的清理功能删除了你需要的某些东西，你可以做的不是禁用它，而是将实际的清理工作委托给擅长这项任务的专用库。例如——DOMPurify。

我已经为它做了一个包装器库，这样就可以很容易地在Angular中使用它: https://github.com/TinkoffCreditSystems/ng-dompurify

它还有一个管道来声明式地净化HTML:

<div [innerHtml]="value | dompurify"></div>

与这里建议的管道的不同之处在于，它实际上通过DOMPurify进行消毒，因此适用于SVG。

编辑:Angular不再在Ivy渲染器中对CSS进行消毒，所以下面的信息(出于历史考虑)是不相关的:

要记住的一件事是，DOMPurify很适合净化HTML/SVG，但不适用于CSS。所以你可以提供Angular的CSS消毒器来处理CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

它是内部的——因此有了ɵ前缀，但这也是Angular团队在他们自己的包中使用它的方式。该库也适用于Angular Universal和服务器端渲染环境。

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