Router

Router Diagram
In the browser, the location (URL information) and session history (a stack of locations visited by the current browser tab) are stored in the global window object. They are accessible via:
window.location (Location API)
window.history (History API)
Our location data is a dynamic and important part of application state-the kind of state that belongs in a store. Holding it in the store enables devtools luxuries like time-travel debugging, and easy access from any store-connected component.
This plugin binds that state from the Angular router to our NGXS store.
Installation
1
npm install @ngxs/router-plugin --save
2
​
3
# or if you are using yarn
4
yarn add @ngxs/router-plugin
Copied!
Usage
Add the NgxsRouterPluginModule plugin to your root app module:
1
import { NgxsModule } from '@ngxs/store';
2
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
3
​
4
@NgModule({
5
  imports: [NgxsModule.forRoot([]), NgxsRouterPluginModule.forRoot()]
6
})
7
export class AppModule {}
Copied!
Now the route will be reflected in your store under the router state name. The state is represented as a RouterStateSnapshot object.
You can also navigate using the store's dispatch method. It accepts the following arguments: new Navigate(path: any[], queryParams?: Params, extras?: NavigationExtras). A simple example would be navigating to the admin page like this:
1
import { Store } from '@ngxs/store';
2
import { Navigate } from '@ngxs/router-plugin';
3
​
4
@Component({ ... })
5
export class MyApp {
6
​
7
  constructor(private store: Store) {}
8
​
9
  onClick() {
10
    this.store.dispatch(new Navigate(['/admin']))
11
  }
12
​
13
}
Copied!
You can use action handlers to listen to state changes in your components and services by subscribing to the RouterNavigation, RouterCancel, RouterError or RouterDataResolved action classes.
Listening to the data resolution event
You can listen to the RouterDataResolved action that is dispatch when the navigated route has some linked resolvers. For example:
1
import { Actions, ofActionSuccessful } from '@ngxs/store';
2
import { RouterDataResolved } from '@ngxs/router-plugin';
3
​
4
import { Subject } from 'rxjs';
5
import { takeUntil } from 'rxjs/operators';
6
​
7
@Component({ ... })
8
export class AppComponent {
9
​
10
  private destroy$ = new Subject<void>();
11
​
12
  constructor(actions$: Actions) {
13
    actions$.pipe(
14
      ofActionSuccessful(RouterDataResolved),
15
      takeUntil(this.destroy$)
16
    ).subscribe((action: RouterDataResolved) => {
17
      console.log(action.routerState.root.firstChild.data);
18
    });
19
  }
20
​
21
  ngOnDestroy(): void {
22
    this.destroy$.next();
23
    this.destroy$.complete();
24
  }
25
​
26
}
Copied!
The more explicit example would be a situation where you would want to bind an input property providing some resolved data. For example:
1
import { Actions, ofActionSuccessful } from '@ngxs/store';
2
import { RouterDataResolved } from '@ngxs/router-plugin';
3
​
4
import { map } from 'rxjs/operators';
5
​
6
@Component({
7
  template: `
8
    <app-some-component [data]="data$ | async"></app-some-component>
9
  `
10
})
11
export class AppComponent {
12
  data$ = this.actions$.pipe(
13
    ofActionSuccessful(RouterDataResolved),
14
    map((action: RouterDataResolved) => action.routerState.root.firstChild.data)
15
  );
16
​
17
  constructor(private actions$: Actions) {}
18
}
Copied!
Custom Router State Serializer
You can implement your own router state serializer to serialize the router snapshot.
1
import { Params, RouterStateSnapshot } from '@angular/router';
2
​
3
import { NgxsModule } from '@ngxs/store';
4
import { NgxsRouterPluginModule, RouterStateSerializer } from '@ngxs/router-plugin';
5
​
6
export interface RouterStateParams {
7
  url: string;
8
  params: Params;
9
  queryParams: Params;
10
}
11
​
12
// Map the router snapshot to { url, params, queryParams }
13
export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateParams> {
14
  serialize(routerState: RouterStateSnapshot): RouterStateParams {
15
    const {
16
      url,
17
      root: { queryParams }
18
    } = routerState;
19
​
20
    let { root: route } = routerState;
21
    while (route.firstChild) {
22
      route = route.firstChild;
23
    }
24
​
25
    const { params } = route;
26
​
27
    return { url, params, queryParams };
28
  }
29
}
30
​
31
@NgModule({
32
  imports: [NgxsModule.forRoot([]), NgxsRouterPluginModule.forRoot()],
33
  providers: [{ provide: RouterStateSerializer, useClass: CustomRouterStateSerializer }]
34
})
35
export class AppModule {}
Copied!
Web Socket
HMR
Last modified 1yr ago
Copy link
Contents
Installation
Usage
Listening to the data resolution event
Custom Router State Serializer