This repository is for version 1.x of of @ngrx/router-store.
Click here for the latest version (4.x)
@ngrx/router-store
Bindings to connect angular/router to ngrx/store
Installation
npm install @ngrx/[email protected] --save
Setup
- Use the
routerReducerwhen providing theStoreModule.provideStoreand add theRouterStoreModule.connectRouterto the@NgModule.imports:
import { StoreModule } from '@ngrx/store';
import { routerReducer, RouterStoreModule } from '@ngrx/router-store';
@NgModule({
imports: [
BrowserModule,
StoreModule.provideStore({ router: routerReducer }),
RouterStoreModule.connectRouter()
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}- Add
RouterStateto main application state:
import { RouterState } from '@ngrx/router-store';
export interface AppState {
router: RouterState;
};- (Optional) Set the initial value for the router state:
StoreModule.provideStore({ router: routerReducer }, {
router: {
path: window.location.pathname + window.location.search
}
})Dispatching Actions
import { go, replace, search, show, back, forward } from '@ngrx/router-store';Navigation with a new state into history
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));Navigation with replacing the current state in history
store.dispatch(replace(['/path'], { query: 'string' }));Navigation without pushing a new state into history
store.dispatch(show(['/path'], { query: 'string' }));Navigation with only changing query parameters
store.dispatch(search({ query: 'string' }));Navigating back
store.dispatch(back());Navigating forward
store.dispatch(forward());Navigation Extras
The Angular Router Navigation Extras are supported with each router action.
import { NavigationExtras } from '@angular/router';
let extras: NavigationExtras = {
relativeTo: ActivatedRoute,
fragment: string,
preserveQueryParams: boolean,
preserveFragment: boolean,
skipLocationChange: boolean,
replaceUrl: boolean
};
store.dispatch(go(['path', { routeParam: 1 }], { query: 'string' }, extras));