使用ngrx router store管理路由

本文将使用ngrx router store来绑定angular路由到ngrx。

首先实现RouterStateSerializer，并重写serialize

// router.store.ts

import { RouterStateSerializer } from '@ngrx/router-store';
import { Params, RouterStateSnapshot } from '@angular/router';
//  在store中router的数据结构
export interface IRouterStates {
  url: string;
  path: string;
  params: Params;
  queryParams: Params;
}

export class CustomSerializer implements RouterStateSerializer<IRouterStates> {
  serialize(routerState: RouterStateSnapshot): IRouterStates {
    const { url } = routerState;
    let path, params, queryParams;
    // console.log(routerState);
    if (routerState.root.firstChild) {
      const firstChild = routerState.root.firstChild;
      path = firstChild.url[0].path;
      params = firstChild.params; // 路由路径（url）中传递参数 EX:path: 'tab4/:name',
      queryParams = routerState.root.queryParams;
    }
    // Only return an object including the URL, path, params and query params
    // instead of the entire snapshot
    return { url, path, params, queryParams };
  }
}
复制代码

在store模型中添加router

// app.store.ts

import { IRouterStates } from './router.store';
export interface AppStore {
  user: UserStore;
  routerStates: {navigationId: number, state: IRouterStates};
}
复制代码

修改src\app\app.module.ts

import { StoreRouterConnectingModule, routerReducer, RouterStateSerializer} from '@ngrx/router-store';
import { CustomSerializer } from './states/store/router.store';

 imports: [
    // 增加
     StoreModule.forRoot({ 
     	user: userReducer,
     	routerStates: routerReducer
     })
  ],
  // 加入provider
  providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }], 
复制代码

路由跳转

this.router.navigate('url', {...queryparams});
复制代码

获取store中的路由信息

 this.store.select('routerStates').subscribe(
      states => {
      	if (states.state) { console.log(states.state);}
  	  }
 );
复制代码