Angular加载含Web组件的HTML：输入输出与服务调用失效问题

要实现通过SingleComponent加载数千个外部data.html，同时让其中的Web组件正常使用@Input、@Output和FunctionService，核心是解决Angular对innerHTML内容不进行组件编译与上下文绑定的问题，以下是几个可行方案：

方案一：动态编译组件并手动绑定上下文 #

Angular的innerHTML仅渲染静态DOM，不会处理其中的Angular组件。我们可以手动解析HTML中的组件标签，动态编译并挂载组件，同时绑定输入输出和服务：

1. 加载HTML并解析组件标签：先获取data.html内容，插入到宿主元素后，找出所有自定义组件标签（比如以app-开头的标签）。
2. 动态创建组件与模块：为每个组件生成临时的组件元数据和模块，将目标组件包含在内。
3. 编译并挂载组件：用Compiler编译动态模块，创建组件实例并挂载到对应的DOM节点。
4. 绑定输入输出与服务：手动将SingleComponent的上下文数据传递给动态组件，订阅输出事件，并注入FunctionService。

示例代码：

// SingleComponent.ts
import { Component, Compiler, Injector, ViewChild, ElementRef, NgModule, CommonModule } from '@angular/core';
import { FunctionService } from './function.service';
// 假设你有组件映射表，存储所有可能用到的Web组件
import { componentMap } from './component-map';

@Component({
  selector: 'app-single',
  template: '<div #host></div>'
})
export class SingleComponent {
  @ViewChild('host', { static: true }) hostElement: ElementRef;

  constructor(
    private compiler: Compiler,
    private injector: Injector,
    private functionService: FunctionService
  ) {}

  async loadContent(id: string) {
    // 1. 加载外部HTML
    const htmlRes = await fetch(`assets/data/${id}/data.html`);
    const html = await htmlRes.text();
    this.hostElement.nativeElement.innerHTML = html;

    // 2. 遍历所有Web组件标签
    const componentTags = this.hostElement.nativeElement.querySelectorAll('app-*');
    for (const tag of componentTags) {
      const tagName = tag.tagName.toLowerCase();
      const componentKey = tagName.replace('app-', '');
      const TargetComponent = componentMap[componentKey];
      if (!TargetComponent) continue;

      // 3. 创建动态组件与模块
      const DynamicWrapperComponent = Component({
        template: tag.outerHTML,
        providers: [{ provide: FunctionService, useValue: this.functionService }]
      })(class {});

      const DynamicModule = NgModule({
        declarations: [DynamicWrapperComponent, TargetComponent],
        imports: [CommonModule]
      })(class {});

      // 4. 编译并创建组件实例
      const moduleFactory = await this.compiler.compileModuleAndAllComponentsAsync(DynamicModule);
      const compFactory = moduleFactory.componentFactories.find(f => f.componentType === DynamicWrapperComponent);
      const compRef = compFactory.create(this.injector, [], tag);

      // 5. 绑定输入：从标签属性读取输入值（示例用data-*属性）
      const inputAttrs = tag.attributes;
      for (let i = 0; i < inputAttrs.length; i++) {
        const attr = inputAttrs[i];
        if (attr.name.startsWith('data-input-')) {
          const inputKey = attr.name.replace('data-input-', '');
          compRef.instance[inputKey] = attr.value;
        }
      }

      // 6. 绑定输出：订阅组件输出事件
      if (compRef.instance['onAction']) {
        compRef.instance['onAction'].subscribe(data => {
          this.handleComponentOutput(data);
        });
      }

      // 触发变更检测
      compRef.changeDetectorRef.detectChanges();
    }
  }

  private handleComponentOutput(data: any) {
    // 处理组件输出的逻辑，比如调用SingleComponent的方法
    console.log('组件输出:', data);
  }
}

方案二：使用Portal API挂载组件 #

Angular的Portal API可以将组件动态挂载到指定DOM节点，适合作为占位符替换的方案：

1. 在data.html中使用占位符：将Web组件替换为带标识的占位符，比如<div class="component-placeholder" data-comp="app-custom"></div>。
2. 加载HTML后替换占位符：找到所有占位符，用ComponentPortal创建对应组件的Portal，通过DomPortalOutlet挂载到占位符位置。
3. 绑定输入输出：直接操作组件实例的输入属性，订阅输出事件。

示例代码：

// SingleComponent.ts
import { Component, ElementRef, ViewChild, ComponentFactoryResolver, Injector } from '@angular/core';
import { DomPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
import { FunctionService } from './function.service';
import { componentMap } from './component-map';

@Component({
  selector: 'app-single',
  template: '<div #host></div>'
})
export class SingleComponent {
  @ViewChild('host', { static: true }) hostElement: ElementRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector,
    private functionService: FunctionService
  ) {}

  async loadContent(id: string) {
    const htmlRes = await fetch(`assets/data/${id}/data.html`);
    const html = await htmlRes.text();
    this.hostElement.nativeElement.innerHTML = html;

    // 遍历所有占位符
    const placeholders = this.hostElement.nativeElement.querySelectorAll('.component-placeholder');
    for (const placeholder of placeholders) {
      const compName = placeholder.getAttribute('data-comp');
      const TargetComponent = componentMap[compName];
      if (!TargetComponent) continue;

      // 创建Portal并挂载
      const portal = new ComponentPortal(TargetComponent, null, this.injector, [
        { provide: FunctionService, useValue: this.functionService }
      ]);
      const outlet = new DomPortalOutlet(placeholder, this.componentFactoryResolver, this.injector);
      const compRef = outlet.attach(portal);

      // 绑定输入
      compRef.instance.inputValue = '来自SingleComponent的数据';
      // 绑定输出
      compRef.instance.outputEvent.subscribe(data => {
        this.handleOutput(data);
      });
    }
  }

  private handleOutput(data: any) {
    // 处理输出逻辑
  }
}

关键注意事项 #

• JIT编译配置：动态编译需要启用Angular的JIT模式，生产环境下需在angular.json中配置aot: false，或引入@angular/compiler支持JIT编译。
• 性能优化：对已编译的组件工厂进行缓存，避免重复编译；如果组件数量极大，可考虑分批加载渲染。
• 输入输出约定：提前约定data.html中组件标签的输入属性格式（比如data-input-xxx），方便动态解析绑定。

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