无路由独立Angular应用中配置Effects和Store：如何创建EnvironmentInjector？

核心思路 #

你提到的createEnvironmentInjector确实是Angular官方推荐的标准方案，完全支持与provideEffects配合使用。核心是为这个低频弹窗组件创建独立的环境注入器，仅在需要时加载组件及其依赖的NgRx状态和Effects，用完后销毁以避免内存泄漏。

分步实现 #

1. 确保组件是独立的

首先确认弹窗组件标记为standalone: true，无需在NgModule中声明：

@Component({
  standalone: true,
  template: `
    <div class="modal">
      <!-- 你的确认表单逻辑 -->
      <button (click)="onConfirm()">确认</button>
      <button (click)="onCancel()">取消</button>
    </div>
  `,
  imports: [CommonModule] // 按需导入其他依赖（比如FormsModule）
})
export class DataConfirmationComponent {
  @Output() close = new EventEmitter<void>();

  constructor(private store: Store) {}

  onConfirm() {
    this.store.dispatch(confirmData());
    this.close.emit();
  }

  onCancel() {
    this.close.emit();
  }
}

2. 创建带NgRx配置的环境注入器

使用createEnvironmentInjector将组件所需的provideState和provideEffects封装到独立的环境注入器中，以根注入器作为父注入器确保能访问全局服务：

@Injectable({ providedIn: 'root' })
export class ModalService {
  constructor(
    private rootInjector: Injector,
    private applicationRef: ApplicationRef,
    private cfr: ComponentFactoryResolver
  ) {}

  openDataConfirmationModal(): void {
    // 创建包含NgRx配置的环境注入器
    const modalEnvInjector = createEnvironmentInjector([
      provideState(dataConfirmationFeature), // 你的NgRx Feature State
      provideEffects(DataConfirmationEffects) // 组件专属的Effects
    ], this.rootInjector);

    // 动态创建组件实例
    const componentFactory = this.cfr.resolveComponentFactory(DataConfirmationComponent);
    const componentRef = componentFactory.create(modalEnvInjector);

    // 将组件附加到应用根节点，渲染到DOM
    this.applicationRef.attachView(componentRef.hostView);
    const domNode = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    document.body.appendChild(domNode);

    // 弹窗关闭时清理资源
    componentRef.instance.close.subscribe(() => {
      this.applicationRef.detachView(componentRef.hostView);
      componentRef.destroy();
      modalEnvInjector.destroy(); // 必须销毁注入器，终止Effects
    });
  }
}

3. 优化：组件+依赖完全懒加载

如果希望连组件代码和NgRx配置都不打包进初始包，可以结合动态导入：

@Injectable({ providedIn: 'root' })
export class ModalService {
  // ... 注入项和其他方法

  async openDataConfirmationModal(): Promise<void> {
    // 动态导入组件、Feature State和Effects
    const {
      DataConfirmationComponent,
      dataConfirmationFeature,
      DataConfirmationEffects
    } = await import('./path/to/data-confirmation.component');

    // 后续创建注入器和组件的逻辑同上
    const modalEnvInjector = createEnvironmentInjector([
      provideState(dataConfirmationFeature),
      provideEffects(DataConfirmationEffects)
    ], this.rootInjector);

    // ... 组件创建和渲染逻辑
  }
}

关键注意事项 #

• 必须销毁环境注入器：如果不调用modalEnvInjector.destroy()，NgRx Effects会一直驻留内存，导致内存泄漏。
• Angular 16+简化写法：如果使用Angular 16及以上版本，可以直接通过ViewContainerRef.createComponent的environmentInjector参数传入，无需ComponentFactoryResolver：

  // 在宿主组件中使用
  openModal(vcr: ViewContainerRef) {
    const modalEnvInjector = createEnvironmentInjector([
      provideState(dataConfirmationFeature),
      provideEffects(DataConfirmationEffects)
    ], this.rootInjector);
  
    const componentRef = vcr.createComponent(DataConfirmationComponent, {
      environmentInjector: modalEnvInjector
    });
  
    // 清理逻辑同上
  }
  

为什么这是标准方案 #

Angular的EnvironmentInjector设计初衷就是为了给独立组件提供隔离的依赖上下文，而provideEffects返回的EnvironmentProvider正是专门为环境注入器设计的配置项，完全契合你的场景——无需全局注册，仅在组件激活时加载依赖，用完即销毁。

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