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

Posted 2023-03-13

【中文标题】Angular2路由器2.0.0在加载不同参数的相同url时不重新加载组件？

【英文标题】：Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?

【发布时间】：2017-01-24 18:56:32

【问题描述】：

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

export const routing = RouterModule.forChild([

    path: 'page/:id',
    component: PageComponent
]);

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

现在，当我尝试导航到 X 为 id 的 /page/X 时，它只会第一次加载，然后 url 会更改，但组件不会再次“重新加载”。

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

【参考方案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() 中执行您的代码

【讨论】：

谢谢，订阅参数效果很好

我在 ANGULAR 4 上遇到了同样的问题。这个问题有什么解决方案吗？

守卫和这个有什么关系？

@MgSam 感谢您的提示。似乎我在更新答案时复制了错误的链接 - 已修复

【参考方案2】：

使用 Angular 7.2、路由器 7.2，您可以执行以下操作。

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

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

你可以阅读更多关于路由重用策略here

【参考方案3】：

角度 9

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

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

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

【讨论】：

this.router.routeReuseStrategy.shouldReuseRoute = function () return false; 对我有用

我需要它只工作一次——对于一个特定的navigate()，所以它不会影响路由器在应用程序中的工作方式。这个答案合适吗？

【参考方案4】：

使用 Angular ~8

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

工作正常

【参考方案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