虽然这个问题之前似乎已经出现过，但我找不到适合我的答案，因为路由器似乎在 angular 的整个生命周期中发生了很大变化。
在 Angular 5 中，我有一个希望编辑用户的组件。我使用以下代码导航到该组件：
this.router.navigate(['editsingleuser',user.username])
这会将我发送到 /editsingleuser/bob
然后，在该组件中，我还可以单击一个按钮来编辑我自己的用户详细信息，它使用以下代码：
this.router.navigate(['editsingleuser',this.user.sub])
应该将我发送到 /editsingleuser/joe，但没有
有没有我可以添加到router.navigate 的参数来强制它加载路由，因为它似乎在做某种缓存？
我也尝试过使用
[routerLink]="['editsingleuser',user?.sub]"
也有同样的问题
【问题讨论】：
我会这样做：
constructor(private router: Router, private route: ActivatedRoute) { }
/**
* Navigate to User Details
*
* @summary Navigates to User Details Page
* @param userId: string
* @returns void
*/
navigateToUserDetails(userId: string): void {
this.router.navigate(['.', userId], { relativeTo: this.route.parent });
}
此解决方案避免了代码中的硬编码 URL 片段。如果 'editsingleuser' URL 片段因某种原因发生更改，可防止出现问题。
所以，如果您的路由子路径类似于 :userId
，我相信这里的技巧是 this.route.parent【讨论】：
在 Angular 8 中，可以加载一些其他路由，然后返回到当前活动的路由。试试这个：
this.router.navigateByUrl('/', {skipLocationChange: true})
.then(()=>this.router.navigate(['editsingleuser',this.user.sub]));
学分：
【讨论】：
从 5.1 开始，Angular 有一个路由重载设置。这是一个名为
的参数onSameUrlNavigation
https://angular.io/api/router/ExtraOptions
@NgModule({
imports: [ RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' }) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
我建议不要使用这种技术。
当您导航到同一条路线时，Angular 的默认行为不会重新加载路线。这是一个很好的故障保险，而且很有意义。
但是，如果您要更改参数，您可以订阅参数更改并采取相应的行动，例如：
@Component({
selector: 'app-custom-edit',
templateUrl: './custom-edit.component.html',
styleUrls: ['./custom-edit.component.scss']
})
export class CustomEditComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(res => {
if (+res.id === 0) this.initNew() // 'id' here is an example url parameter
else this.initExisting(+res.id)
})
}
initNew() {
//..
}
initExisting(id: number){
//..
}
}
并且，相应地，您可以根据参数实际处理组件的设置或重置。把它当作你的工作，而不是路由器的工作。此触发器将在第一次初始化和导航到具有不同参数的相同 url 时触发。
至少，它比重新加载整个路线更有效。
【讨论】：
你想要的并不是 Angular 中的一份奇怪的工作！我在Stackblitz 创建了一个项目，向您展示即使您在同一个组件中，组件将如何再次呈现（重新实例化）。
注意您应该在 app.routing.module 中为相应的组件定义一个带有参数的路由，如下所示，我为目录定义了username 参数： p>
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 处使用它。
【讨论】：
ngOnInit()），它有
我遇到了同样的问题，这在我的情况下解决了它
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
}
【讨论】：
这个问题的答案是我必须在我的 EditSingleUser 组件中订阅路由参数，并在我为页面获取数据时使用这个值
在 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
})
【讨论】：
您无法导航到editsingleuser/joe，因为您已经在editsingleuser 路线中。如果您要从 editsingleuser 导航到相同的路线，则应在您的 editsingleuser 组件中更改以下代码：
this.router.navigate(['editsingleuser',this.user.sub]);
到这里：
this.router.navigate(['/editsingleuser',this.user.sub]);
所以你对路由器说，你将去全球路由editsingleuser。
Here我为你创建了一个工作示例。
【讨论】：