如何使用NGRX路由存储在组件之间导航并将url更改为localhost:4200/:id

NGRX是一个基于RxJS实现的Angular应用状态管理工具。它提供了一种可预测、可维护的方式来管理应用的状态，并且可以与Angular的路由系统结合使用。

要使用NGRX路由存储在组件之间导航并将URL更改为localhost:4200/:id，需要按照以下步骤进行操作：

首先，安装NGRX相关的依赖包。可以通过npm或yarn来进行安装：

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

创建一个NGRX store来管理应用的状态。可以使用@ngrx/store提供的createReducer函数来定义reducer函数，用于处理应用状态的更新。在reducer中，可以定义多个action类型，并且根据不同的action类型更新相应的状态。同时，也可以使用createSelector函数创建selectors来获取应用状态的部分数据。
创建一个NGRX effect来处理路由导航的副作用。可以使用@ngrx/effects提供的Effect装饰器来定义effect，使用@Effect()装饰器来监听路由导航事件，并在路由导航时执行相应的副作用操作，如更新状态、发送HTTP请求等。
在应用的根模块中，使用StoreModule.forRoot()函数将NGRX store模块注册到应用中。同时，使用EffectsModule.forRoot()函数将NGRX effect模块注册到应用中。
在组件中，可以使用store.select()函数来选择需要订阅的状态数据。通过订阅状态数据的变化，可以在组件中获取最新的状态，并根据状态的变化来更新组件的展示。
在组件中，可以使用store.dispatch()函数来派发action，从而触发reducer函数的执行，并更新应用的状态。
在组件中，可以使用Angular的Router服务来进行路由导航。可以通过调用router.navigate()函数来导航到指定的URL，并根据需要传递参数。

总结：使用NGRX路由存储在组件之间导航并将URL更改为localhost:4200/:id的步骤包括创建NGRX store和effect、在根模块中注册store和effect、在组件中订阅状态和派发action、使用Angular的Router服务进行路由导航。

对于这个问题中提到的localhost:4200/:id的URL，可以使用Angular的路由配置来实现。在路由配置中，可以定义一个带参数的路由，例如：

{
  path: 'component/:id',
  component: ComponentName
}

在组件中，可以通过ActivatedRoute服务来获取URL中的参数id：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  const id = this.route.snapshot.paramMap.get('id');
}

腾讯云相关产品和产品介绍链接地址：