时间戳

首页 > 解决方案 > Angular - 带有样式的 InnerHtml

angular - Angular - 带有样式的 InnerHtml

问题描述

我有这个...

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

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

有什么线索吗？

标签： angular

解决方案

正如@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的孩子

推荐阅读