Skip to content

Commit

Permalink
feat: expose the MinimalRouteData type (#299)
Browse files Browse the repository at this point in the history
# Features
- Expose the `MinmalRouteData` type used by
`MinimalActivatedRouteSnapshot#data`.
  • Loading branch information
LayZeeDK authored Dec 19, 2022
1 parent d4dadf0 commit 774fad4
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 6 deletions.
39 changes: 36 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ Published with partial Ivy compilation.

## API

A `RouterStore` service has the following public properties:
### RouterStore

A `RouterStore` service has the following public properties.

| API | Description |
| ----------------------------------------------------------------------- | ------------------------------------------ |
Expand All @@ -40,7 +42,7 @@ A _local_ `RouterStore` requires a component-level provider, follows the
lifecycle of that component, and can be injected in declarables as well as
other component-level services.

### Global router store
#### Global router store

An application-wide router store that can be injected in any class. Use
`provideGlobalRouterStore` to provide it in a root environment injector.
Expand Down Expand Up @@ -107,7 +109,7 @@ export class HeroDetailComponent {
}
```

### Local router store
#### Local router store

A component-level router store. Can be injected in any directive, component,
pipe, or component-level service. Explicitly provided in a component sub-tree
Expand All @@ -134,3 +136,34 @@ export class HeroDetailComponent {
this.#routerStore.selectRouteParam('id');
}
```

### Serializable router state

Several of the Angular Router's types are recursive which means that they aren't serializable. The router stores exclusively use serializable types to support advanced state synchronization strategies.

#### MinimalActivatedRouteSnapshot

The `MinimalActivatedRouteSnapshot` interface is used for the observable `RouterStore#currentRoute$` property. This interface is a serializable subset of the Angular Router's `ActivatedRouteSnapshot` class and has the following public properties.

| API | Description |
| --------------------------------------------------- | ------------------------------------------------ |
| `children: MinimalActivatedRouteSnapshot[]` | The children of this route in the route tree. |
| `data: MinimalRouteData` | The static and resolved data of this route. |
| `firstChild: MinimalActivatedRouteSnapshot \| null` | The first child of this route in the route tree. |
| `fragment: string \| null` | The URL fragment shared by all routes. |
| `outlet: string` | The outlet name of the route. |
| `params: Params` | The matrix parameters scoped to this route. |
| `queryParams: Params` | The query parameters shared by all routes. |
| `routeConfig: Route \| null` | The configuration used to match this route. |
| `title: string \| undefined` | The resolved route title. |
| `url: UrlSegment[]` | The URL segments matched by this route. |

#### MinimalRouteData

The `MinimalRouteData` interface is used for the `RouterStore#data$` property. This interface is a serializable subset of the Angular Router's `Data` type. In particular, the `symbol` index in the Angular Router's `Data` type is removed. `MinimalRouteData` has the following signature.

```typescript
export type MinimalRouteData = {
[key: string]: any;
};
```
1 change: 1 addition & 0 deletions packages/router-component-store/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export * from './lib/router-store';

// Serializable route state
export * from './lib/@ngrx/router-store/minimal-activated-route-state-snapshot';
export * from './lib/minimal-route-data';
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import { ActivatedRouteSnapshot } from '@angular/router';
import { OmitSymbolIndex } from '../../util-types/omit-symbol-index';
import { MinimalRouteData } from '../../minimal-route-data';

/**
* Contains the information about a route associated with a component loaded in
Expand Down Expand Up @@ -67,7 +67,7 @@ export interface MinimalActivatedRouteSnapshot {
* the Angular `Router`. Instead, we access the resolved route title through
* `MinimalActivatedRouteSnapshot['title']`.
*/
readonly data: OmitSymbolIndex<ActivatedRouteSnapshot['data']>;
readonly data: MinimalRouteData;
/**
* The outlet name of the route.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { OmitSymbolIndex } from './util-types/omit-symbol-index';

/**
* Serializable route `Data` without its symbol index, in particular without the
* `Symbol.for(RouteTitle)` key as this is an internal value for the Angular
* `Symbol(RouteTitle)` key as this is an internal value for the Angular
* `Router`.
*/
export type MinimalRouteData = OmitSymbolIndex<Data>;

0 comments on commit 774fad4

Please sign in to comment.