NGRX 组件存储在 Angular 延迟加载模块中工作

Question

我有一个 Angular 16 应用程序，我在

app.routes

文件中延迟加载模块，如下所示：

export const APP_ROUTES: Routes = [
  {
    loadChildren: () => import('./modules/users/users.routes').then(m => m.USERS_ROUTES),
    path: 'users',
  },
  {
    loadChildren: () => import('./modules/settings/settings.routes').then(m => m.SETTINGS_ROUTES),
    path: 'settings',
  },
]

带有用户路由模块的

文件

users.routes

如下所示：

export const USERS_ROUTES: Route[] = [
  {
    path: '',
    providers: [UsersHttpRepository, UsersComponentStore],
    resolve: [() => inject(UsersComponentStore).loadUsers$()],
    children: [
      {
        path: '',
        component: UsersListPage,
      },
      {
        path: ':userId',
        component: UserDetailsPage,
      },
    ],
  },
];

我的应用程序的架构非常模块化，其中某些部分（

/users

，

/settings

等）是独立的模块，没有重叠或导入一些公共部分。我决定使用 NGRX 组件存储，因为我保存在各个模块中的数据仅与它们相关，不会超出它们，因此不需要在全球范围内提供它。但我想要一个组件存储实例在特定模块中的所有组件上工作（我将其称为模块存储），因此数据可以在所有组件之间共享。
我知道，这不是组件存储的确切用例，组件存储应该直接提供到组件中，而不是路由中。
组件存储本身非常基础，部分内容如下所示：

export const initialState: UsersComponentState = {
  users: []
  userDetails: null
};

@Injectable()
export class UsersComponentStore extends ComponentStore<UsersComponentState> {
  readonly users = this.selectSignal(state => state.users);
  readonly userDetails = this.selectSignal(state => state.userDetails);

  readonly loadUsers$ = this.effect<void>(_ =>
    _.pipe(
      switchMap(() =>
        this.repository.loadUsers().pipe(
          tapResponse({
            next: users =>
              this.patchState({users}),
            error: (error: HttpErrorResponse) => errorLogger(error)
          })
        )
      )
    )
  );

  constructor(private readonly repository: UsersHttpRepository) {
    super(initialState);
  }
}

我在这里担心的是，当用户离开路线并导航到

users

模块之外的其他位置时，

ngOnDestroy

钩子不会执行，因此该组件存储的实例永远不会被销毁。返回

/users

路线后，所有数据仍然可用。 这与将组件存储直接提供给组件并随其销毁时的行为不同。
我知道这可能是正确的行为，因为一旦路由和模块被延迟加载，它就永远不会被破坏，所以我在此处放入

routes

数组的提供者：

export const USERS_ROUTES: Route[] = [
  {
    path: '',
    providers: [UsersHttpRepository, UsersComponentStore],

也永远不会被破坏。
我的问题是我是否应该担心这个？最终，我希望在我的每个模块中都有一个像这样的组件存储，并且我担心一些内存泄漏或未完成的订阅。

Answer 1

是否存在内存泄漏或未完成的订阅完全取决于您的代码。没有人可以仅仅通过你在这里的问题来告诉你这一点。

但是您可以尝试使用一个空的 shell/容器组件，该组件将在其提供程序中注册

UsersComponentStore

，因此所有 shell 的子级都将获得此实例。 shell 组件被销毁后，其提供者也会被销毁