Question

虽然此问题似乎已经出现过，但我无法找到适合我的答案，因为路由器似乎在角度的生命周期中发生了很大的变化。

在角度5中，我有一个我希望编辑用户的组件。我使用以下代码导航到该组件：

this.router.navigate(['editsingleuser',user.username])

会将我发送至/ editsingleuser / bob

然后，从该组件中我也可以单击一个按钮来编辑我自己的用户详细信息，其中包含以下代码：

this.router.navigate(['editsingleuser',this.user.sub])

应该将我发送到/ editsingleuser / joe，但不是

是否有一个参数可以添加到router.navigate，强制它加载路由，因为它似乎正在进行某种缓存？

我也尝试过使用

[routerLink]="['editsingleuser',user?.sub]"

也有同样的问题

Answer 1

在Angular 8中，可以加载其他路线，然后返回到当前活动路线。只需尝试：

this.router.navigateByUrl('/', {skipLocationChange: true})
  .then(()=>this.router.navigate(['editsingleuser',this.user.sub]));

积分：

How to reload the current route with the angular 2 router
https://dev.to/oleksandr/mastering-angular-8-five-things-that-are-good-to-know-to-save-your-time-14hk（项目＃5：＃5。在同一URL导航上重新加载组件）

Answer 2

我遇到了同样的问题，这在我的情况下得以解决

constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
  }

Answer 3

从5.1开始，Angular具有重新加载路线的设置。这是一个名为

的参数

onSameUrlNavigation

https://angular.io/api/router/ExtraOptions

item

我建议不要使用此技术。

当您导航到同一条路线时，Angular的默认行为不会重新加载该路线。这是一个很好的故障保护机制，很有意义。

但是，如果要更改参数，则可以订阅参数更改并采取相应的操作，例如：

@NgModule({
  imports: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

并且，根据相应的含义，您可以根据参数的实际情况来处理组件的设置或重置。把它当作您的工作，而不是路由器的工作。此触发器将在首次初始化时以及在导航到具有不同参数的相同网址时触发。

至少，与重新加载整个路线相比，效率更高。

Answer 4

这个问题的答案是我必须订阅EditSingleUser组件中的route参数，并在获取页面数据时使用此值

在ngOnInit（）

中

this.route.params
  .switchMap((p: Params)=>{
      let usr = p['username']; //read the username route parameter
      return this.apiService.getUser(usr)}      //call getUser with that parameter
        )
  .subscribe(data=> {
    this.user= data
    console.log("data :" + JSON.stringify(data));
    this.setupFormData();          //use the resulting data to set up the form
  })

Answer 5

您想要的在Angular中并不是一件奇怪的工作！我在Stackblitz中创建了一个项目，以向您展示如何再次渲染（重新实例化）一个组件，即使您位于同一组件中。

请注意，您应在 app.routing.module 中为相应组件定义带有参数的路由，如下所示，其中我为目录定义了username参数：

 RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog/:username', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
 ])

然后按如下所示导航至它：

<a routerLink="/catalog/foo">Catalog 1</a> |

<a routerLink="/catalog/bar">Catalog 2</a>

如果URL不变，则用作参数的变量存在问题。在这种情况下，您使用this.router.navigate还是[routerLink]都没有区别。

然后在 catalog.component.ts 中使用它。

Answer 6

由于您已经在editsingleuser/joe路线，因此无法导航至editsingleuser。如果您要从editsingleuser导航到相同的路线，那么您应该更改editsingleuser组件中的以下代码：

this.router.navigate(['editsingleuser',this.user.sub]);

到此：

this.router.navigate(['/editsingleuser',this.user.sub]);

所以你对路由器说，你将全球去路由editsingleuser。

Here我为你创建了一个工作示例。

angular使用不同的参数导航到相同的路径

6 个答案: