feat: add RouterStore#selectRouteData selector factory (#290)

# Features
- Add factory for selecting specific route data

Author: LayZeeDK

packages/router-component-store/src/lib/global-router-store/global-router-store-selectors.spec.ts

@@ -126,6 +126,14 @@ describe(`${GlobalRouterStore.name} selectors`, () => {
     });
   });
 
+  it('creates a selector for specific route data', async () => {
+    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+
+    await expect(
+      firstValueFrom(store.selectRouteData<string>('testData'))
+    ).resolves.toBe('test-data');
+  });
+
   it('exposes a selector for the URL', async () => {
     await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
 

packages/router-component-store/src/lib/global-router-store/global-router-store.ts

@@ -78,6 +78,10 @@ export class GlobalRouterStore
     return this.select(this.queryParams$, (params) => params[param]);
   }
 
+  selectRouteData<TValue>(key: string): Observable<TValue | undefined> {
+    return this.select(this.routeData$, (data) => data[key]);
+  }
+
   selectRouteParam(param: string): Observable<string | undefined> {
     return this.select(this.routeParams$, (params) => params[param]);
   }

packages/router-component-store/src/lib/local-router-store/local-router-store-selectors.spec.ts

@@ -134,6 +134,14 @@ describe(`${LocalRouterStore.name} selectors`, () => {
     });
   });
 
+  it('creates a selector for specific route data', async () => {
+    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+
+    await expect(
+      firstValueFrom(getStore().selectRouteData<string>('testData'))
+    ).resolves.toBe('test-data');
+  });
+
   it('exposes a selector for the URL', async () => {
     await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
 

packages/router-component-store/src/lib/local-router-store/local-router-store.ts

@@ -77,6 +77,10 @@ export class LocalRouterStore
     return this.select(this.queryParams$, (params) => params[param]);
   }
 
+  selectRouteData<TValue>(key: string): Observable<TValue | undefined> {
+    return this.select(this.routeData$, (data) => data[key]);
+  }
+
   selectRouteParam(param: string): Observable<string | undefined> {
     return this.select(this.routeParams$, (params) => params[param]);
   }

packages/router-component-store/src/lib/router-store.ts

@@ -57,6 +57,15 @@ export abstract class RouterStore {
    * Select the current URL.
    */
   abstract readonly url$: Observable<string>;
+  /**
+   * Select the specified route data.
+   *
+   * @param key The route data key.
+   *
+   * @example <caption>Usage</caption>
+   * const limit$ = routerStore.selectRouteData<number>('limit');
+   */
+  abstract selectRouteData<TValue>(key: string): Observable<TValue | undefined>;
   /**
    * Select the specified query parameter.
    *