如何为API动态注入的HTML应用Angular组件作用域CSS？

问题本质 #

Angular默认的Emulated视图封装会给组件内的DOM元素和样式添加唯一的属性选择器（如_ngcontent-xxx），而通过[innerHTML]插入的API返回HTML不会带有这个属性，因此组件内定义的样式无法匹配到插入的元素。

方案1：使用CSS自定义属性（推荐） #

利用CSS变量的继承特性，在组件根容器定义变量，插入的HTML元素会继承容器的CSS变量，从而应用组件内的样式。

组件SCSS代码：

.content {
  /* 定义CSS变量 */
  --heading-color: red;
  --paragraph-margin: 1rem 0;
}

/* 使用变量匹配插入的元素 */
.content h3 {
  color: var(--heading-color);
}

.content p {
  margin: var(--paragraph-margin);
}

组件模板代码：

<div class="content" [innerHTML]="htmlContent"></div>

方案2：创建专用的HTML渲染子组件 #

创建独立的子组件，将其视图封装设置为None，但仅在该组件内定义针对插入HTML的样式。这样样式只会作用于子组件的内容，不会全局污染。

子组件（HtmlRendererComponent）代码

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

@Component({
  selector: 'app-html-renderer',
  template: `<div class="rendered-content" [innerHTML]="safeHtml"></div>`,
  styles: [`
    .rendered-content h3 {
      color: red;
      font-size: 1.2rem;
    }
    .rendered-content p {
      line-height: 1.5;
    }
    /* 其他需要的样式 */
  `],
  encapsulation: ViewEncapsulation.None
})
export class HtmlRendererComponent {
  @Input() html: string = '';
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges() {
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.html);
  }
}

父组件中使用

<app-html-renderer [html]="apiResponseHtml"></app-html-renderer>

方案3：使用:host结合具体选择器 #

通过:host选择器限定样式作用于当前组件，同时用具体选择器匹配插入的元素，确保样式仅作用于当前组件内的内容。

组件SCSS代码：

:host .content h3,
:host .content p {
  color: red;
}

内容的提问来源于stack exchange，提问作者Lebanta