如何在Standalone Component（独立组件）中注册NgRx Effects？

针对你遇到的类型不匹配问题，以及需要在懒加载独立组件存活期间注册Effects的需求，可根据你的NgRx版本选择以下方案：

方案一：NgRx 15+（推荐） #

NgRx 15引入了适配独立组件的provideEffects API，无需依赖模块，直接在组件的providers中注册：

1. 确保你的Effects类使用@Injectable()装饰器，且不要设置providedIn: 'root'（避免全局注册）：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs';

@Injectable()
export class MyStandAloneComponentRelatedEffects {
  constructor(private actions$: Actions) {}

  // 示例Effect
  handleComponentAction$ = createEffect(() => 
    this.actions$.pipe(
      ofType('COMPONENT_ACTION'),
      map(() => ({ type: 'HANDLED_ACTION' }))
    )
  );
}

2. 在独立组件的providers数组中使用provideEffects注册：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideEffects } from '@ngrx/effects';
import { MyStandAloneComponentRelatedEffects } from './my-effects';

@Component({
  selector: 'my-standlone-component',
  standalone: true,
  imports: [CommonModule],
  providers: [
    provideEffects(MyStandAloneComponentRelatedEffects)
  ],
  template: `<p>My standalone component</p>`
})
export class MyStandaloneComponent {}

方案二：NgRx 14 #

NgRx 14尚未推出独立API，需通过importProvidersFrom结合类型断言解决类型不匹配问题：

1. 同样确保Effects类为@Injectable()且不设置providedIn: 'root'。

2. 在组件的providers中注册：

import { Component, importProvidersFrom, Provider } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EffectsModule } from '@ngrx/effects';
import { MyStandAloneComponentRelatedEffects } from './my-effects';

@Component({
  selector: 'my-standlone-component',
  standalone: true,
  imports: [CommonModule],
  providers: [
    importProvidersFrom(EffectsModule.forFeature([MyStandAloneComponentRelatedEffects])) as Provider
  ],
  template: `<p>My standalone component</p>`
})
export class MyStandaloneComponent {}

效果说明 #

两种方案均能实现：当懒加载的独立组件被创建时，对应的Effects会被注册；组件销毁时，Effects会自动注销，完全替代原SCAM方案的生命周期绑定逻辑。

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