如果路由到相同的参数，角度不会重新加载

Posted 2023-02-22

【中文标题】如果路由到相同的参数，角度不会重新加载

【英文标题】：Angular not reload if route to same param

【发布时间】：2019-02-03 21:31:36

【问题描述】：

我想在每次单击按钮时重新加载页面 article/:id，Angular 能够在 :id 更改时重新加载页面，但如果路由到相同的 :id，那么它会忽略更改。

export class DocumentComponent 
    constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router
    ) 

    ngOnInit() 
        this.routeSubscription = this.activatedRoute.params.subscribe(params => 
            this.reloadPage(+params['id']);
        );
    

    clickReload(id: number) 
        this.router.onSameUrlNavigation = 'reload';
        this.router.navigate(['article', id]);
    

当参数改变时，会触发可观察的params，并执行reloadPage()。但是，当我尝试重新加载相同的 params 时，Angular 会忽略它，我该如何重新加载相同的 param？

article/123 --> article/456 [ok]
article/111 --> article/222 [ok]
article/666 --> article/666 [not ok, how?]

我尝试使用onSameUrlNavigation，但它不起作用......我做错了什么吗？

【问题讨论】：

您究竟为什么希望它重新加载 BTW？ activatedRoute.params 是一个 BehaviorSubject，它只在新值发生变化时推送它。由于id 没有变化，因此不会触发变化。

How to reload the current route with the angular 2 router的可能重复

How to reload the current route with the angular 2 router的可能重复

【参考方案1】：

您需要检查 id 是否相同，然后重新加载页面。你可以这样做：

clickReload(id: number) 
    if(id == this.activatedRoute.snapshot.params.id) 
        window.location.reload();    //if id is same then just reload the page
     else 
        this.router.navigate(['article', id]);
    

【参考方案2】：

您可以像下面这样添加并删除验证.. 只需导航就足够了。

@NgModule(
  imports: [RouterModule.forRoot(routes, 
    onSameUrlNavigation: 'reload',
    enableTracing: false
  )],
  exports: [RouterModule]
)

例子：

https://stackblitz.com/edit/mlc-onsameurlnavigation-activatedroute?file=app%2Fapp-routing.module.ts