在Angular应用中,可以使用ngrx来管理应用的状态。当在路由器URL遍历时,我们可以通过以下步骤来保持存储状态:
@ngrx/store
和@ngrx/router-store
这两个依赖包。import { routerReducer, RouterReducerState } from '@ngrx/router-store';
export interface AppState {
// 其他应用状态
router: RouterReducerState;
}
export const reducers: ActionReducerMap<AppState> = {
// 其他reducer
router: routerReducer,
};
StoreRouterConnectingModule
来连接路由器和ngrx的store。这个模块将会自动监听路由器导航事件,并将其转化为ngrx的action。例如:import { StoreRouterConnectingModule } from '@ngrx/router-store';
@NgModule({
imports: [
// 其他模块
StoreRouterConnectingModule.forRoot(),
],
})
export class AppModule {}
select
函数从store中选择需要的状态。例如,可以选择路由器的当前URL:import { select, Store } from '@ngrx/store';
import { RouterReducerState, selectCurrentRoute } from '@ngrx/router-store';
@Component({
// 组件配置
})
export class MyComponent {
currentRoute$: Observable<RouterReducerState>;
constructor(private store: Store<AppState>) {
this.currentRoute$ = this.store.pipe(select(selectCurrentRoute));
}
}
async
管道来订阅状态的变化并显示在视图中。例如:<div>{{ currentRoute$ | async }}</div>
通过以上步骤,我们可以在路由器URL遍历时保持存储状态。ngrx会自动监听路由器导航事件,并更新相应的状态。这样,在路由器导航时,我们可以保持应用的状态不变,以提供更好的用户体验。
对于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或者腾讯云开发者社区来获取更详细的信息。
领取专属 10元无门槛券
手把手带您无忧上云