当相同的url加载不同的参数时,Angular2路由器2.0.0不重新加载组件？

Question

我在.routing.ts文件中有这个

export const routing = RouterModule.forChild([
{
    path: 'page/:id',
    component: PageComponent
}]);

我的PageComponent文件检查id参数并相应地加载数据.在以前版本的路由器中,如果我从/ page/4转到/ page/25,页面将"重新加载"并且组件将更新.

现在,当我尝试导航到/ page/X,其中X是id时,它只会在第一次加载,然后url会更改,但组件不会再次"重新加载".

是否需要传递一些东西来强制我的组件重新加载,并调用ngOnInit事件？

Answer 1

更新2

这个答案仅适用于很久以前停产的路由器版本.

有关如何在当前路由器中执行此操作,请参阅https://angular.io/api/router/RouteReuseStrategy.

更新1

现在通过https://github.com/angular/angular/pull/13124为新路由器修复了(Angular 2.3),它允许提供自定义重用策略.

有关示例,请参阅https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

原版的

https://github.com/angular/angular/issues/9811

这是一个众所周知的问题.目前,无法使路由器在仅参数路由更改上重新创建组件.

他们讨论了最终实施一些重用策略的计划.

您可以订阅params更改并在那里执行代码而不是in ngOnInit()

Answer 2

角 9

我使用了以下方法并且有效。

  onButtonClick() {
     this.router.routeReuseStrategy.shouldReuseRoute = function () {
     return false;
     }
   this.router.onSameUrlNavigation = 'reload';
   this.router.navigate('/myroute', { queryParams: { index: 1 } });

}

此外，它还适用于路径参数。

Answer 3

对于Angular 7.2，路由器7.2可以执行以下操作。

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

我尝试了几种方法，但这是我的路由器加载导航组件的内容的唯一方法。

您可以在此处阅读有关路由重用策略的更多信息