正确的语法如下:

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

文档参考

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

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

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

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

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

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

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

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

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

Stackoverflow很有用!

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

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

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

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

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

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

你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。

例如:<div [innerHTML]="theHtmlString"></div>

使用规范形式如下:

<div bind-innerHTML="theHtmlString"></div>

Angular文档:https://angular.io/guide/template-syntax#property-binding-property

参见工作stackblitz示例

我们总是可以将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>