Angular

Question

假设我有一个显示电影演员列表的组件。 select编辑演员后，有关该特定演员的一些详细信息将显示在同一组件上。

我的目标是在 URL 中包含电影 ID 和演员 ID。此外，当 selected 新演员时，URL 中的演员 ID 应相应更改。

URL 应具有以下形式：/movies/movieId/actors/actorId

所以我有一个组件需要执行以下操作：

获取电影 ID
对于该电影 ID，获取演员列表
如果没有提供演员 ID，select 第一个演员并相应地修改 URL
如果提供了演员 ID，select 那个演员并且不修改 URL
只要用户select是列表

我不确定什么是更新 URL 参数的最佳解决方案。目前，我正在使用以下解决方案：

路由配置：

path: ':movieIdId',
      component: MoviesComponent,
      children: [
        {
          path: 'actors',
          component: ActorsComponent
        },
        {
          path: 'actors/:actorId',
          component: ActorsComponent
        }
]

为了更新 URL，我执行以下操作：

updateActorId(actorId: number) {
    this.router.navigate(['movies', this.movieId, 'actors', actorId]);
}

Answer 1

更改 URL 而无需实际导航到其他地方（如果这是您要问的）的一种方法是使用 Location go

location.go('/movies/' + this.moveId + '/actors/' + actorId)

https://angular.io/api/common/Location#go

Angular - 如何以编程方式更新 URL 参数

Angular - how to update a URL parameter programatically

angular-routing