如何根据数据类型动态注入Angular独立组件？

1. 定义抽象基类与类型标识 #

先创建抽象类统一搜索结果组件的输入接口，同时要求每个组件绑定唯一的类型标识，用于匹配返回的数据类型：

// search-result.base.ts
export abstract class SearchResultBaseComponent {
  @Input() data: any; // 可根据业务替换为泛型或具体数据类型
  static abstract resultType: string; // 静态类型标识，避免实例化开销
}

2. 业务模块组件实现抽象类 #

各个业务模块的搜索结果组件分别实现该抽象类，并指定对应的resultType：

// 业务模块A - search-result-type1.component.ts
@Component({
  selector: 'app-search-result-type1',
  standalone: true,
  template: `<div>类型1结果：{{data.title}}</div>`
})
export class SearchResultType1Component extends SearchResultBaseComponent {
  static resultType = 'type1'; // 对应搜索返回数据的type字段值
}

// 业务模块B - search-result-type2.component.ts
@Component({
  selector: 'app-search-result-type2',
  standalone: true,
  template: `<div>类型2结果：{{data.content}}</div>`
})
export class SearchResultType2Component extends SearchResultBaseComponent {
  static resultType = 'type2';
}

3. 用DI批量注册组件映射 #

为避免手动维护组件映射表，利用Angular多提供者机制批量注入所有搜索结果组件：

第一步：定义注入令牌 #

// search-result.tokens.ts
import { InjectionToken } from '@angular/core';
import { SearchResultBaseComponent } from './search-result.base';

export const SEARCH_RESULT_COMPONENTS = new InjectionToken<typeof SearchResultBaseComponent[]>('SEARCH_RESULT_COMPONENTS');

第二步：业务组件注册到令牌 #

每个搜索结果组件通过自身的providers配置注册到令牌：

// search-result-type1.component.ts
@Component({
  // ...其他配置
  providers: [
    {
      provide: SEARCH_RESULT_COMPONENTS,
      useClass: SearchResultType1Component,
      multi: true // 多提供者模式，允许多个组件共享同一令牌
    }
  ]
})
export class SearchResultType1Component extends SearchResultBaseComponent {
  static resultType = 'type1';
}

4. 搜索组件动态渲染逻辑 #

在搜索组件中注入所有注册的结果组件，自动生成类型映射表，再根据返回数据动态创建组件：

// search.component.ts
import { Component, EnvironmentInjector, ViewChildren, QueryList, ViewContainerRef, ComponentRef } from '@angular/core';
import { SearchResultBaseComponent } from './search-result.base';
import { SEARCH_RESULT_COMPONENTS } from './search-result.tokens';

@Component({
  selector: 'app-search',
  standalone: true,
  template: `
    <div *ngFor="let item of searchResults">
      <ng-template #resultContainer></ng-template>
    </div>
  `
})
export class SearchComponent {
  searchResults: Array<{ type: string; data: any }> = [];
  private resultComponentMap = new Map<string, typeof SearchResultBaseComponent>();

  @ViewChildren('resultContainer', { read: ViewContainerRef }) 
  private resultContainers!: QueryList<ViewContainerRef>;

  constructor(
    private envInjector: EnvironmentInjector,
    @Inject(SEARCH_RESULT_COMPONENTS) resultComponents: typeof SearchResultBaseComponent[]
  ) {
    // 自动生成类型-组件映射表
    resultComponents.forEach(ComponentClass => {
      this.resultComponentMap.set(ComponentClass.resultType, ComponentClass);
    });
  }

  // 搜索完成后触发渲染
  onSearchCompleted(results: Array<{ type: string; data: any }>) {
    this.searchResults = results;
    this.renderResults();
  }

  private renderResults() {
    this.resultContainers.forEach((container, index) => {
      const resultItem = this.searchResults[index];
      const TargetComponent = this.resultComponentMap.get(resultItem.type);
      
      if (TargetComponent) {
        container.clear();
        // 创建独立组件实例并传入数据
        const componentRef: ComponentRef<SearchResultBaseComponent> = container.createComponent(TargetComponent, {
          environmentInjector: this.envInjector
        });
        componentRef.instance.data = resultItem.data;
      }
    });
  }
}

关键注意点 #

• 独立组件必须通过EnvironmentInjector创建，确保组件自身的依赖能正确解析
• 建议将抽象类改为泛型SearchResultBaseComponent<T>，给@Input() data指定强类型，避免类型错误
• 静态resultType比实例化后获取更高效，减少不必要的组件初始化操作

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