css - 为什么 css 规则不应用于注入 html 的 dom 清理的角度字符串？

Question

我有一个非常奇怪的问题，即在注入 html 时未应用 css 规则这是注入 html 的代码：

decorate(text)
  {
    return this.sanitizer.bypassSecurityTrustHtml(text.replace('Doe','<b>Doe</b>'));
  }

在模板中：

<h1 [innerHTML]="decorate('JohnDoe')"></h1>
<h1>Jane<b>Doe</b></h1>

我添加了一个 CSS 规则

h1 { color:#888; } 
h1 b {color:#ff0000;}

但是，JognDoe 仍然是灰色的，而 JaneDoe 按预期将 Doe 变成了红色。为什么 Johns'Doe 不呈现红色？

在检查器中呈现的 HTML 如下所示：

<h1 _ngcontent-c11="">John<b>Doe</b></h1>
<h1 _ngcontent-c11="">Jane<b _ngcontent-c11="">Doe</b></h1>

对我来说，Johndoe 没有理由是灰色的..：

我用这个问题组装了一个小沙箱：

https://stackblitz.com/edit/angular-playground-pyjqju

Answer 1

Angular 默认使用 ViewEncapsulation.Emulated。这意味着 CSS 将仅适用于当前组件的元素。由于这种模拟封装角度阻止样式应用于innerHTML 元素。您可以通过将模拟视图更改为无来解决此问题。

试试这个：

组件.ts

import { Component, ViewEncapsulation } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html",
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  readonly name: string = "Angular";
  version: number = 7;

  constructor(private sanitizer: DomSanitizer) {}

  onVersionRelease(): void {
    this.version += 1;
  }
  decorate(text) {
    return this.sanitizer.bypassSecurityTrustHtml(
      text.replace("Doe", "<b>Doe</b>")
    );
  }
}