Router store¶
Для связки модуля маршрутизации с хранилищем используйте NgRx Router State, который позволяет отслеживать процесс смены URL в Angular приложении с помощью действий.
NgRx Router Store устанавливается отдельно.
npm i @ngrx/router-store --save
Далее необходимо импортировать нужные модули в корневой модуль вашего Angular приложения.
@NgModule({
imports: [
BrowserModule,
StoreModule.forRoot({router: routerReducer}),
StoreRouterConnectingModule.forRoot(),
],
})
Сама структура состояния router
выглядит следующим образом.
{
state: {
root: {/*...*/},
url: '/'
},
navigationId: 1
}
Описание объекта состояния NgRx Router Store:
state
- информация в текущем маршруте, содержит два свойства:root
- экземпляр корневого маршрута;url
- текущий URL-адрес;navigationId
- порядковый номер смены маршрутизации в рамках текущей сессии работы Angular приложения.
В NgRx Router Store предусмотрены пять действий, каждое из которых представляет одну из стадий процесса смены маршрута:
ROUTER_REQUEST
- начало перехода на другой URL;ROUTER_NAVIGATION
- сам процесс перехода, вызывается до выполнения всехGuards
иResolvers
;ROUTER_NAVIGATED
- успешный переход на заданный URL;ROUTER_CANCEL
- генерируется, если смена URL была заблокированаGuard
илиResolver
;ROUTER_ERROR
- генерируется, если в процессе перехода возникает ошибка
Действия ROUTER_CANCEL
и ROUTER_ERROR
содержат информацию в маршруте с которого осуществляется переход.
Конфигурация NgRx Router Store¶
Метод StoreRouterConnectingModule.forRoot()
в качестве необязательного параметра принимает объект с пользовательскими настройками NgRx Router Store.
Передаваемый объект должен реализовывать интерфейс StoreRouterConfig
с тремя не обязательными свойствами:
stateKey
- имя части глобального состояния, в которой будут храниться все данные маршрутизации (по умолчаниюrouter
); помимо строки может принимать селектор;serializer
- позволяет кастомизировать структуру данных состояния, которое передается в каждом действии;navigationActionTiming
- определяет момент генерации действияROUTER_NAVIGATION
и может быть либоNavigationActionTiming.PreActivation
(по умолчанию), либоNavigationActionTiming.PostActivation
.
NavigationActionTiming.PreActivation
означает, что ROUTER_NAVIGATION
будет сгенерировано до вызова всех Guards
и Resolvers
, а NavigationActionTiming.PostActivation
- после.
Рассмотрим пример использования serializer
.
import {
Params,
RouterStateSnapshot,
Data,
} from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';
export interface AppRouterStateUrl {
url: string;
params: Params;
queryParams: Params;
data: Data;
}
export class AppSerializer
implements RouterStateSerializer<AppRouterStateUrl> {
serialize(state: RouterStateSnapshot): AppRouterStateUrl {
let currentRoute = state.root;
while (currentRoute.firstChild) {
currentRoute = currentRoute.firstChild;
}
const {
url,
root: { queryParams },
} = state;
const { params, data } = currentRoute;
return { url, params, queryParams, data };
}
}
И затем в app.module.ts
.
StoreRouterConnectingModule.forRoot({
serializer: CustomSerializer,
});