在 Angular 独立组件中共享 NgRx 功能模块

Question

如果多个 Angular standalone 组件依赖于同一个功能模块，那么如何使该功能模块共享，即仅加载和初始化一次？

就我而言，为了避免预先加载不必要的状态，我将 NgRx 功能捆绑到 Angular 模块中：

import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";

...

@NgModule({ imports: [
  StoreModule.forFeature(MY_FEATURE_KEY, myFeatureReducer),
  EffectsModule.forFeature(myFeatureEffects)
]})
export class MyNgrxFeatureModule {
  constructor(store: Store) {
    console.log('MyNgrxFeatureModule initializing');
    store.dispatch(initializeData());
  }
}

在模块初始化期间触发一些数据初始化

initializeData()

（通常涉及对数据后端的网络调用）。

一些 Angular 独立组件导入 NgRx 功能模块：

@Component({
  selector: 'app-goods-table',
  standalone: true,
  imports: [ MyNgrxFeatureModule, ... ],
  ...
})
export class MyComponent1 {
  // ... 
}

我观察到每个导入

MyNgrxFeatureModule

的组件似乎都会重新初始化功能模块（功能模块构造函数中的

console.log()

会重复执行，显然对于每个加载的独立组件块都会执行一次）。

当多个独立组件依赖于共享功能模块时，如何延迟加载（或初始化）一次共享功能模块？ （我正在使用最新的 Angular 17 和 NgRx 17？）

Answer 1

一种方法是提升状态，这样它只注册一次。

另一方面，多次注册状态应该不成问题。 NgRx 将检测到它已经注册并“忽略”它。例如。效果不会被注册两次，状态也不会被覆盖。