如何将`@ngrx/router-store`集成到`@ngrx/signals``signalStore`中

Question

我希望页面响应路由参数，检索与该参数关联的后端数据，并在

@ngrx/signals

signalStore

中管理该数据。

我正在尝试这种方法，而不是使用解析器加载数据，因为它（理论上）允许我比等待数据更快地加载占位符页面，并且（希望）将我的所有数据管理整合到我的信号存储。

但是，我正在努力以基于信号的方式直接将路线参数集成到商店中。目前，我正在组件中设置路由参数信号，并使用效果来更新商店

@Component({ ... })
class MyComponent {
  readonly store = inject(MySignalStore); // current implementation is irrelevant I think

  readonly #updatePageId = effect(
    () => {
      // `selectRouteParam()` is a utility signal from '@ngrx/router-store'
      const pageId = this.#store.selectSignal(selectRouteParam('pageId'))();
      if (pageId) this.store.getDataForId(pageId);
    },
    { allowSignalWrites: true }
  );
}

这很丑陋，我更愿意将这个逻辑直接移到我的商店中，但我不太清楚如何做。

effect()

中是否有类似

signalStore()

的东西，我可以在其中注册现有的外部信号并从中应用

computed()

属性？

Answer 1

我现在正在信号存储中的

onInit()

挂钩中设置此逻辑...

import { Store } from '@ngrx/store';
import { getRouterSelectors } from '@ngrx/router-store';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import {
  signalStore,
  withHooks,
  withMethods,
  withState,
} from '@ngrx/signals';
import { pipe } from 'rxjs';
export const { selectRouteParam } = getRouterSelectors();

export const MySignalStore = signalStore(
  withState({ ... }),
  withMethods({
    getDataForId: rxMethod(
      pipe( ... ) // implementation is irrelevant
    )
  }),
  withHooks((store, global = inject(Store)) => ({
    onInit(): void {
      global
        .select(selectRouteParam('pageId'))
        .pipe(tap(store.getDataForId))
        .subscribe();
    },
  }))
);

为了简单起见，我删除了取消订阅逻辑