如何在门面模式中使用ngrx signalStore？

Question

在角度中，我想使用ngrx新signalStore来获取手臂的位置并保存在状态中，问题是我不知道如何等待位置的响应，并且在地图中设置标记后想要用LOCATION_STORE替换服务

export const LOCATION_STORE = signalStore(
  { providedIn: "root" },
  withState(() => inject(LOCATION_STORE_INITIAL_STATE)),
  withMethods((store, atmService: AtmsService = inject(AtmsService)) => ({
    fetchLocations: rxMethod<void>(pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => patchState(store, { loading: true })),
      mergeMap(() => atmService.getBranchesAndAtms().pipe(
        tapResponse({
          next: (locations: Array<LocationModel>) => {
            const branches: Array<LocationModel> = locations.filter((res: LocationModel) => res.isBranch);
            const atms: Array<LocationModel> = locations.filter((res: LocationModel) => !res.isBranch);
            return patchState(store, { atms, branches })
          },
          error: (errorCode: string) => patchState(store, { error: errorCode }),
          finalize: () => patchState(store, { loading: false })
        })
      ))
    )),
  }))
)

# I use google map library 

 initiateMap(mapContainer: HTMLElement) {
    return forkJoin([ this.getGoogleMap(mapContainer), this._atmService.getBranchesAndAtms() ]).pipe(
      tap(([ googleMap, locations ]): void => {
        const markers: Array<google.maps.Marker> = this.addMarkers(locations);
        this.addMarkerClusterer(googleMap, markers);
      })
    )
  }

Answer 1

你必须用实体来实现商店。 看这篇文章

那么您只需从商店获取数据即可，而不是

AtmsService

。您

AtmsService

只能在商店中使用。我们称其为

AtmsStore

。

那么你的

initiateMap()

函数应该如下所示：

private atmsStore = inject(AtmsStore);

initiateMap(mapContainer: HTMLElement) {
   return this.getGoogleMap(mapCOntainer).pipe(
      tap(googleMap => {
         const markers: Array<google.maps.Marker> = this.addMarkers(this.atmsStore.entities());
         this.addMarkerClusterer(googleMap, markers);
      })
   )
}