Angular - 带有样式的 InnerHtml答案

【问题标题】：Angular - InnerHtml with stylesAngular - 带有样式的 InnerHtml
【发布时间】：2019-12-21 22:43:07
【问题描述】：

我有这个……

const htmlVar = "<html>
<div style="display:flex">
<div>
  <h1>Hello World</h1>
</div>
</div>
";

在我的 html 上我有这个..

 <div [innerHtml]="htmlVar"></div>

它可以渲染一切，但样式:(

我尝试了这个链接的解决方案：style not working for innerhtml in Angular 2 Typescript

但它不起作用。可能是因为太旧了。

有什么线索吗？

【问题讨论】：

考虑使用DomSanitizer 来让它工作。
A div 不能包含 head 或 body，这是无效的 HTML
是的，@Liam..刚刚编辑过......但这不是问题。仍在继续

标签： angular

【解决方案1】：

正如@R.Richards 提到的，使用DomSanitizer：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.
.
.
htmlVar: SafeHtml;

constructor(protected _sanitizer: DomSanitizer) {
  this.htmlVar = this._sanitizer.bypassSecurityTrustHtml(`
    <html>
      <head></head>
      <body>
        <div style="display:flex; color: red;">
          <div>
            <h1>Hello World</h1>
          </div>
        </div>
      </body>
    </html>`);
}

我创建了一个stackblitz 来说明

另外，正如@liam 已经提到的，您不应该将<html>、<header> 或<body> 标记为DIV 的孩子

【讨论】：