这里已经提供了简短的回答:使用<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和服务器端渲染环境。

在Angular v2.1.1中工作

<div [innerHTML]="variable or htmlString">
</div>

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

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

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

演讲

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

组件

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

属性绑定

Javascript DOM外部HTML

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

转换成。html文件

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

导入.ts文件

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

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

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

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

我们总是可以将html内容传递给innerHTML属性以呈现html动态内容，但动态html内容也可能被感染或恶意。因此，在将动态内容传递给innerHTML之前，我们应该始终确保内容是经过消毒的(使用DOMSanitizer)，这样我们就可以逃脱所有恶意内容。

试试下面的管子:

import { 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: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>