Skip to content

Commit 77a5e66

Browse files
committed
feat!: use strict query parameters
**BREAKING CHANGES** `RouterStore#queryParams$` and `MinimalActivatedRouteSnapshot#queryParams` use `StrictRouteParams` instead of `Params`. Members are read-only and of type `string | undefined` instead of `any`. TypeScript will fail to compile application code that has assumed a query parameter type other than `string | undefined`. BEFORE: ```typescript // heroes.component.ts // (...) import { RouterStore } from "@ngworker/router-component-store"; @component({ // (...) }) export class DashboardComponent { #routerStore = inject(RouterStore); limit$: Observable<number> = this.#routerStore.queryParams$.pipe( map((params) => params["limit"]) ); } ``` AFTER: ```typescript // heroes.component.ts // (...) import { RouterStore } from "@ngworker/router-component-store"; @component({ // (...) }) export class DashboardComponent { #routerStore = inject(RouterStore); limit$: Observable<number> = this.#routerStore.queryParams$.pipe( map((params) => Number(params["limit"] ?? 10)) ); } ```
1 parent 90bb745 commit 77a5e66

5 files changed

Lines changed: 8 additions & 10 deletions

File tree

README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ A `RouterStore` service has the following public properties.
4040
| ------------------------------------------------------------------------------------- | --------------------------------------------------------- |
4141
| `currentRoute$: Observable<MinimalActivatedRouteSnapshot>` | Select the current route. |
4242
| `fragment$: Observable<string \| null>` | Select the current route fragment. |
43-
| `queryParams$: Observable<Params>` | Select the current route query parameters. |
43+
| `queryParams$: Observable<StrictRouteParams>` | Select the current route query parameters. |
4444
| `routeData$: Observable<StrictRouteData>` | Select the current route data. |
4545
| `routeParams$: Observable<StrictRouteParams>` | Select the current route parameters. |
4646
| `title$: Observable<string \| undefined>` | Select the resolved route title. |
@@ -174,7 +174,7 @@ The `MinimalActivatedRouteSnapshot` interface is used for the observable `Router
174174
| `fragment: string \| null` | The URL fragment shared by all routes. |
175175
| `outlet: string` | The outlet name of the route. |
176176
| `params: StrictRouteParams` | The matrix parameters scoped to this route. |
177-
| `queryParams: Params` | The query parameters shared by all routes. |
177+
| `queryParams: StrictRouteParams` | The query parameters shared by all routes. |
178178
| `routeConfig: Route \| null` | The configuration used to match this route. |
179179
| `title: string \| undefined` | The resolved route title. |
180180
| `url: UrlSegment[]` | The URL segments matched by this route. |
@@ -193,7 +193,7 @@ export type StrictRouteData = {
193193

194194
#### StrictRouteParams
195195

196-
The `StrictRouteParams` interface is used for route parameters in the `MinimalActivatedRouteSnapshot#params` and `RouterStore#routeParams$` properties but not for query parameters. This interface is a strictly typed version of the Angular Router's `Params` type where the `any` member type is replaced with `unknown`.
196+
The `StrictRouteParams` type is used for route parameters in the `MinimalActivatedRouteSnapshot#params` and `RouterStore#routeParams$` properties and for query parameters in the `MinimalActivatedRouteSnapshot#queryParams` and `RouterStore#queryParams$` properties. It is a strictly typed version of the Angular Router's `Params` type where members are read-only and the `any` member type is replaced with `string | undefined`.
197197

198198
`StrictRouteParams` has the following signature.
199199

packages/router-component-store/src/lib/@ngrx/router-store/minimal-activated-route-state-snapshot.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export interface MinimalActivatedRouteSnapshot {
5454
/**
5555
* The query parameters shared by all the routes.
5656
*/
57-
readonly queryParams: ActivatedRouteSnapshot['queryParams'];
57+
readonly queryParams: StrictRouteParams;
5858
/**
5959
* The URL fragment shared by all the routes.
6060
*/

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
NavigationEnd,
66
NavigationError,
77
NavigationStart,
8-
Params,
98
Router,
109
RoutesRecognized,
1110
} from '@angular/router';
@@ -53,7 +52,7 @@ export class GlobalRouterStore
5352
this.#rootRoute$,
5453
(route) => route.fragment
5554
);
56-
queryParams$: Observable<Params> = this.select(
55+
queryParams$: Observable<StrictRouteParams> = this.select(
5756
this.#rootRoute$,
5857
(route) => route.queryParams
5958
);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
NavigationEnd,
88
NavigationError,
99
NavigationStart,
10-
Params,
1110
Router,
1211
RouterStateSnapshot,
1312
RoutesRecognized,
@@ -45,7 +44,7 @@ export class LocalRouterStore
4544

4645
currentRoute$: Observable<MinimalActivatedRouteSnapshot> = this.#localRoute;
4746
fragment$: Observable<string | null>;
48-
queryParams$: Observable<Params>;
47+
queryParams$: Observable<StrictRouteParams>;
4948
routeData$: Observable<StrictRouteData>;
5049
routeParams$: Observable<StrictRouteParams>;
5150
title$: Observable<string | undefined>;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Injectable, Type } from '@angular/core';
2-
import { Event as RouterEvent, Params } from '@angular/router';
2+
import { Event as RouterEvent } from '@angular/router';
33
import { Observable } from 'rxjs';
44
import { MinimalActivatedRouteSnapshot } from './@ngrx/router-store/minimal-activated-route-state-snapshot';
55
import { StrictRouteData } from './strict-route-data';
@@ -46,7 +46,7 @@ export abstract class RouterStore {
4646
/**
4747
* Select the current route query parameters.
4848
*/
49-
abstract readonly queryParams$: Observable<Params>;
49+
abstract readonly queryParams$: Observable<StrictRouteParams>;
5050
/**
5151
* Select the current route data.
5252
*/

0 commit comments

Comments
 (0)