Angular InnerHTML 样式不起作用 - TypeScript

当我们在 Angular 中使用 innerHTML 属性将 HTML 代码插入到组件中时，我们可能会遇到样式不起作用的问题。这是由于 Angular 使用 View Encapsulation 样式封装技术，导致生成的 CSS 类名无法应用于 innerHTML 中的元素。

以下是几种解决方案：

解决方案一：使用 ViewContainerRef

我们可以使用 ViewContainerRef 来创建一个视图容器，将 innerHTML 插入到此容器中。这样生成的 CSS 类名就可以应用到 innerHTML 中的元素了。

import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-innerhtml-example',
  template: '<div #container></div>',
  styleUrls: ['./innerhtml-example.component.css']
})
export class InnerhtmlExampleComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  ngAfterViewInit() {
    this.container.element.nativeElement.innerHTML = '<div class="example">Example content</div>';
  }
}

解决方案二：使用 Renderer2

我们可以使用 Renderer2 来动态创建 innerHTML 中的元素，从而可以应用到生成的 CSS 类名。

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-innerhtml-example',
  template: '',
  styleUrls: ['./innerhtml-example.component.css']
})
export class InnerhtmlExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {
    const div = this.renderer.createElement('div');
    this.renderer.addClass(div, 'example');
    const text = this.renderer.createText('Example content');
    this.renderer.appendChild(div, text);
    this.renderer.appendChild(this.el.nativeElement, div);
  }
}

解决方案三：使用 ::ng-deep

我们可以使用 ::ng-deep 伪类来强制样式穿透到 innerHTML 中的元素，虽然这是一个被官方不推荐使用的方法，但在一些情况下可能会有用。

:host ::ng-deep .example {
  color: red;
}

以上是三种解决内联 HTML 样式不起作用的方法。根据具体情况选择不同的方法来解决问题。