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

这是一个已知问题。目前，无法使路由器在仅参数路由更改上重新创建组件。

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

您可以订阅参数更改并在那里执行代码而不是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;
    }  
}

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

您可以阅读有关路由重用策略here

的更多信息

Answer 4

角度为〜8

constructor(private _router: Router) { 
  this._router.onSameUrlNavigation='reload'}

工作正常

Answer 5

此代码适用于角度2和4。你需要订阅下面的参数

selected_id:any;
constructor(private route: ActivatedRoute) { }
ngOnInit() 
{
    this.route.params.subscribe(params => {
    this.selected_id = params['id']; 
    });
}

假设您的页面仍未重新加载，请使用ngOnDestroy取消订阅。

ngOnDestroy()
{
 this.selected_id.unsubscribe();
}

这将清楚以前的参数值

以上逻辑为我工作。希望它对你有所帮助。

[Info]
var selected_id = this.route.snapshot.paramMap.get('id');
//earlier i was used this code to get param value,it works when navigate from 
//different page but not in the same page reload

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

5 个答案:

角度9