将Angular2路由器连接到ngrx/store的过程如下:
import { StoreModule } from '@ngrx/store';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
@NgModule({
imports: [
StoreModule.forRoot({}),
StoreRouterConnectingModule.forRoot()
],
...
})
export class AppModule { }
import { RouterStateSerializer } from '@ngrx/router-store';
import { RouterStateUrl } from './router-state-url';
export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
let route = routerState.root;
while (route.firstChild) {
route = route.firstChild;
}
const { url, root: { queryParams } } = routerState;
const { params } = route;
return { url, params, queryParams };
}
}
import { RouterStateSerializer } from '@ngrx/router-store';
import { CustomRouterStateSerializer } from './custom-router-state-serializer';
@NgModule({
providers: [
{ provide: RouterStateSerializer, useClass: CustomRouterStateSerializer }
],
...
})
export class AppModule { }
import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { RouterReducerState, getSelectors } from '@ngrx/router-store';
@Component({
selector: 'app-root',
template: `
<div>
<h1>Current Route:</h1>
<pre>{{ currentRoute$ | async | json }}</pre>
</div>
`
})
export class AppComponent {
currentRoute$: Observable<RouterReducerState<RouterStateUrl>>;
constructor(private store: Store) {
const { selectCurrentRoute } = getSelectors();
this.currentRoute$ = store.pipe(select(selectCurrentRoute));
}
}
以上步骤将帮助你将Angular2路由器连接到ngrx/store,并允许你在应用程序中使用ngrx/store来管理路由器状态。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云