Angular动态加载HTML样式失效及指定位置创建动态组件咨询

你当前直接通过原生DOM API插入内容没有样式，本质是两个原因：

• Angular默认启用视图样式封装（ViewEncapsulation.Emulated），会给组件内的所有样式选择器自动加上唯一属性前缀，你原生插入的元素没有对应属性，所以组件内定义的样式无法作用到这些元素，只有全局样式会生效。
• 原生插入的HTML不受Angular管理，如果里面包含Angular的指令、绑定、组件等语法，完全不会被编译执行。

你设想的「动态创建带[innerHTML]的组件插入指定位置」是符合Angular规范的方案，具体实现步骤如下：

1. 创建动态HTML渲染组件 #

首先新建一个专门用来渲染外部HTML的小组件：

// dynamic-html.component.ts
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-dynamic-html',
  template: `<div [innerHTML]="safeHtml"></div>`,
  // 如果需要让父组件的样式作用到插入的HTML，关闭样式封装
  encapsulation: ViewEncapsulation.None
})
export class DynamicHtmlComponent {
  safeHtml: SafeHtml = '';

  // 接收传入的HTML字符串
  @Input() set htmlContent(content: string) {
    // 标记HTML为安全，绕过Angular默认的XSS过滤（仅对可信来源的HTML使用）
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(content);
  }

  constructor(private sanitizer: DomSanitizer) {}
}

创建完成后，把这个组件加到对应模块的declarations数组中即可（Angular9+不需要再加entryComponents）。

2. 修改点击事件所在组件的逻辑 #

首先在你处理点击事件的组件中注入需要的依赖：

import { ComponentFactoryResolver, Injector, Renderer2, ViewContainerRef } from '@angular/core';
import { DynamicHtmlComponent } from './dynamic-html.component';

// 省略其余代码
constructor(
  private appService: AppService,
  private componentFactoryResolver: ComponentFactoryResolver,
  private injector: Injector,
  private viewContainerRef: ViewContainerRef,
  private renderer: Renderer2
) {}

然后修改onClickMotClef方法：

onClickMotClef(event: Event): void {
  event.preventDefault();
  const item = event.target as HTMLElement;
  const link = item.getAttribute('link') as string;

  // 内容已存在直接跳转
  if (document.getElementById(link)) {
    // jump(link);
    return;
  }

  const filePath = `assets/cadres/${link.replace(':', '-')}.html`;
  this.appService.getHTML(filePath).subscribe({
    next: (htmlStr) => {
      // 1. 创建动态组件实例
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicHtmlComponent);
      const componentRef = componentFactory.create(this.injector);
      // 2. 给组件传入HTML内容
      componentRef.instance.htmlContent = htmlStr;
      // 3. 手动触发变更检测，确保内容渲染完成
      componentRef.changeDetectorRef.detectChanges();
      // 4. 获取组件的宿主DOM元素，添加id方便后续判断
      const componentHostEl = componentRef.location.nativeElement;
      this.renderer.setAttribute(componentHostEl, 'id', link);
      // 5. 插入到目标位置：点击链接父元素的父元素之前
      const insertBeforeTarget = item.parentNode?.parentNode as Node;
      const parentContainer = insertBeforeTarget?.parentNode as Node;
      this.renderer.insertBefore(parentContainer, componentHostEl, insertBeforeTarget);
      // 6. 将组件加入视图容器，让Angular管理其生命周期
      this.viewContainerRef.insert(componentRef.hostView);
    },
    error: (err) => console.log(err)
  })
}

如果你使用的是Angular14及以上版本，可以省略ComponentFactoryResolver，直接用更简洁的写法创建组件：

const componentRef = this.viewContainerRef.createComponent(DynamicHtmlComponent, {
  injector: this.injector
});

• 如果你插入的HTML只需要全局样式生效，不需要当前组件的样式作用到插入内容，可以不用关闭DynamicHtmlComponent的样式封装，避免样式污染全局。
• 仅对你自己可控的静态HTML（比如assets下的文件）使用bypassSecurityTrustHtml，如果是用户上传的未知来源HTML不要使用该方法，会有XSS攻击风险。

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