Skip to content
This repository has been archived by the owner on Jul 27, 2018. It is now read-only.

ngrx/router-store

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Join the chat at https://gitter.im/ngrx/store

Installation

npm install @ngrx/router-store@1.2.6 --save

Setup

  1. Use the routerReducer when providing the StoreModule.provideStore and add the RouterStoreModule.connectRouter to 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 {
}
  1. Add RouterState to main application state:
import { RouterState } from '@ngrx/router-store';

export interface AppState {
  router: RouterState;
};
  1. (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));