Angular如何从选择器数组加载组件并传递Input/Output？

首先明确：[innerHTML]无法渲染Angular组件，因为它仅负责将字符串解析为普通DOM元素，不会触发Angular的组件编译、实例化流程，自定义组件标签只会被当作未知HTML标签处理，不会渲染组件内容。

要实现动态渲染组件并传递输入输出，正确的做法是直接操作组件类而非选择器字符串，以下是两种可行方案：

方案一：使用*ngComponentOutlet（推荐） #

1. 重构组件数组 #

将原有的选择器字符串数组，改为存储组件类及对应的输入输出配置：

// 先导入需要的组件类
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { Component3 } from './component3.component';

// 定义包含组件、输入、输出的数组
public entrys = [
  {
    component: Component1,
    inputs: { title: '组件1的标题', data: { id: 1 } },
    outputs: { onSubmit: (val) => this.handleComponent1Submit(val) }
  },
  {
    component: Component2,
    inputs: { count: 10 },
    outputs: { onCountChange: (val) => this.handleCountChange(val) }
  },
  {
    component: Component3,
    inputs: { isActive: true },
    outputs: { onToggle: () => this.toggleComponent3() }
  }
];

2. 模板中使用*ngComponentOutlet #

直接通过指令渲染组件，并传递输入：

<ng-container *ngFor="let entry of entrys">
  <ng-container 
    *ngComponentOutlet="entry.component; inputs: entry.inputs"
  ></ng-container>
</ng-container>

3. 订阅组件输出 #

通过ViewChildren获取动态创建的组件实例，手动订阅输出事件：

import { ViewChildren, AfterViewInit, QueryList, ComponentRef } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';

@ViewChildren(NgComponentOutlet) componentRefs!: QueryList<ComponentRef<any>>;

ngAfterViewInit(): void {
  this.entrys.forEach((entry, index) => {
    const componentRef = this.componentRefs.get(index);
    if (componentRef && entry.outputs) {
      // 遍历输出配置，逐个订阅
      Object.entries(entry.outputs).forEach(([outputName, handler]) => {
        componentRef.instance[outputName].subscribe(handler);
      });
    }
  });
}

// 对应的事件处理方法
handleComponent1Submit(val: any) {
  console.log('组件1提交:', val);
}

handleCountChange(val: number) {
  console.log('组件2计数变化:', val);
}

toggleComponent3() {
  console.log('组件3切换状态');
}

方案二：使用ComponentFactoryResolver手动创建组件 #

如果需要更精细的组件生命周期控制，可采用手动创建组件的方式：

1. 注入依赖并定义创建方法 #

import { ComponentFactoryResolver, ViewContainerRef, ComponentRef } from '@angular/core';

constructor(private resolver: ComponentFactoryResolver) {}

// 动态创建组件的通用方法
private createComponent(entry: any, container: ViewContainerRef): ComponentRef<any> {
  // 获取组件工厂
  const factory = this.resolver.resolveComponentFactory(entry.component);
  // 在容器中创建组件
  const componentRef = container.createComponent(factory);
  
  // 设置输入属性
  if (entry.inputs) {
    Object.assign(componentRef.instance, entry.inputs);
    // 手动触发变更检测（若需要）
    componentRef.changeDetectorRef.detectChanges();
  }
  
  // 订阅输出事件
  if (entry.outputs) {
    Object.entries(entry.outputs).forEach(([outputName, handler]) => {
      componentRef.instance[outputName].subscribe(handler);
    });
  }
  
  return componentRef;
}

2. 模板中定义容器 #

<div *ngFor="let entry of entrys">
  <ng-container #componentContainer></ng-container>
</div>

3. 初始化组件 #

通过ViewChildren获取所有容器，在视图初始化后创建组件：

import { ViewChildren, AfterViewInit, QueryList } from '@angular/core';

@ViewChildren('componentContainer') containers!: QueryList<ViewContainerRef>;

ngAfterViewInit(): void {
  this.containers.forEach((container, index) => {
    this.createComponent(this.entrys[index], container);
  });
}

关键注意事项 #

• 所有动态渲染的组件必须在模块的declarations（或imports若为独立组件）中声明，Angular 9+无需手动添加到entryComponents，框架会自动处理。
• 若使用独立组件，需确保在动态创建时正确导入组件的依赖（如所需的模块、指令等）。

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