Angular：如何为动态创建的组件传递构造函数参数？

你当前的写法无法直接生效，因为Angular组件的构造函数参数默认由依赖注入器提供，不能直接在创建组件时手动传入，以下是两种可行的实现方案：

方案一：使用@Input属性传递（官方推荐，最简单） #

这种方案不需要修改依赖注入逻辑，适合绝大多数场景：

1. 修改FilterComponent，把构造参数改为输入属性：

import { Component, Input } from '@angular/core';
import { FilterType } from './filter-collection.component'; // 按实际路径调整

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  // 把构造参数改为Input属性
  @Input() type!: FilterType;

  ngOnInit(): void {
    // 此处已经可以拿到type的值使用
  }
}

2. 动态创建组件后给实例的Input属性赋值：

onAddDateRangeFilter() {
  const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
  const filter = this.entry.createComponent<FilterComponent>(factory);
  // 手动给组件实例的Input属性赋值
  filter.instance.type = FilterType.DateRangeFilter;
  // 赋值后手动触发变更检测，保证视图同步更新
  filter.changeDetectorRef.detectChanges();
  this.filters.push(filter);
}

方案二：自定义注入器传递构造参数 #

如果你确实需要把参数放在构造函数中注入，可以通过自定义注入器实现：

1. 首先创建注入令牌，用于标识要注入的参数：

// 可以放在FilterComponent同级的文件或者filter-collection.component.ts中
import { InjectionToken } from '@angular/core';
import { FilterType } from './filter-collection.component';

export const FILTER_TYPE = new InjectionToken<FilterType>('FILTER_TYPE');

2. 修改FilterComponent的构造函数，用@Inject装饰器声明注入参数：

import { Component, Inject } from '@angular/core';
import { FILTER_TYPE, FilterType } from './filter-collection.component'; // 按实际路径调整

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  constructor(@Inject(FILTER_TYPE) private type : FilterType) {
    // 构造函数中即可拿到type的值
  }

  ngOnInit(): void {
  }
}

3. 动态创建组件时传入自定义注入器：

// 先导入Injector
import { Injector } from '@angular/core';

onAddDateRangeFilter() {
  const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
  // 创建自定义注入器，提供FILTER_TYPE的值
  const customInjector = Injector.create({
    providers: [
      { provide: FILTER_TYPE, useValue: FilterType.DateRangeFilter }
    ],
    // 父注入器使用容器的注入器，保证其他依赖可以正常注入
    parent: this.entry.injector
  });
  // 创建组件时传入自定义注入器
  const filter = this.entry.createComponent<FilterComponent>(factory, { injector: customInjector });
  this.filters.push(filter);
}

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