为什么 css 规则未应用于注入 html 的 dom 已净化 angular 字符串？

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 没有理由是灰色的..:[=20=]

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

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

Answer 1

Angular 默认使用 ViewEncapsulation.Emulated。这意味着 CSS 将仅应用于当前组件的元素。由于这种模拟封装 angular 阻止样式应用于 innerHTML 元素。您可以通过将模拟视图更改为 none.

来解决此问题

试试这个：

component.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>")
    );
  }
}

为什么 css 规则未应用于注入 html 的 dom 已净化 angular 字符串？

Why are css rules not being applied to dom sanitized angular strings injected into html?

css

angular

angular-dom-sanitizer