Javascript Angular2 路由器 2.0.0 在使用不同参数加载相同 url 时不重新加载组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39533291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
提问by Gillardo
I have this in my .routing.ts file
我的 .routing.ts 文件中有这个
export const routing = RouterModule.forChild([
{
path: 'page/:id',
component: PageComponent
}]);
My PageComponentfile checks the id parameter and loads the data accordingly. In previous versions of the router, if i went from /page/4 to /page/25, the page would "reload" and the components would update.
我的PageComponent文件检查 id 参数并相应地加载数据。在以前版本的路由器中，如果我从 /page/4 转到 /page/25，页面将“重新加载”并且组件将更新。
Now when i try navigating to /page/X where X is the id, it only ever loads the first time, then the url changes, but the components do not "reload" again.
现在，当我尝试导航到 X 是 ID 的 /page/X 时，它只会在第一次加载，然后 url 更改，但组件不会再次“重新加载”。
Is there something that needs to be passed in to force my components to reload, and call the ngOnInit event?
是否需要传入某些内容以强制我的组件重新加载并调用 ngOnInit 事件？
回答by Günter Z?chbauer
update 2
更新 2
This answer is only for a long ago discontinued router version.
此答案仅适用于很久以前停产的路由器版本。
See https://angular.io/api/router/RouteReuseStrategyfor how to do it in the current router.
有关如何在当前路由器中执行此操作，请参阅https://angular.io/api/router/RouteReuseStrategy。
update 1
更新 1
That's now fixed (Angular 2.3) for the new router by https://github.com/angular/angular/pull/13124which allows to provide a custom reuse strategy.
现在已通过https://github.com/angular/angular/pull/13124为新路由器修复（Angular 2.3），它允许提供自定义重用策略。
For an example see also https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
original
原来的
https://github.com/angular/angular/issues/9811
https://github.com/angular/angular/issues/9811
That's a known issue. Currently there is no way to make the router re-create the component on parameter-only route changes.
这是一个已知问题。目前没有办法让路由器在仅参数路由更改时重新创建组件。
They discussed plans to implement some reuse-strategies eventually.
他们讨论了最终实施一些重用策略的计划。
You can subscribe to params changes and execute your code there instead of in ngOnInit()
您可以订阅 params 更改并在那里而不是在那里执行您的代码 ngOnInit()
回答by alaasdk
with Angular 7.2, router 7.2 you can do the following.
使用 Angular 7.2、路由器 7.2，您可以执行以下操作。
constructor(
private router: Router
) {
this.router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
}
}
I tried several ways but that was the only way my router did loaded the content of the component I am navigating to.
我尝试了几种方法，但这是我的路由器加载我要导航到的组件内容的唯一方法。
you can read more about route reuse strategies here
您可以在此处阅读有关路由重用策略的更多信息
回答by Guru Cse
Angular 9
角 9
I have used the following and it worked.
我使用了以下方法并且有效。
onButtonClick() {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
}
this.router.onSameUrlNavigation = 'reload';
this.router.navigate('/myroute', { queryParams: { index: 1 } });
}
}
In addition it also works for path params.
此外，它还适用于路径参数。
回答by Sudhan Nadar
with Angular ~8
带角度~8
constructor(private _router: Router) {
this._router.onSameUrlNavigation='reload'}
works fine
工作正常
回答by Varadha Raj
This code work for both angular 2 and 4. you need to subscribe the param like below
此代码适用于角度 2 和 4。您需要订阅如下参数
selected_id:any;
constructor(private route: ActivatedRoute) { }
ngOnInit()
{
this.route.params.subscribe(params => {
this.selected_id = params['id'];
});
}
suppose still your page not get reloaded, unsubscribe value by using ngOnDestroy.
假设您的页面仍未重新加载，请使用 ngOnDestroy 取消订阅值。
ngOnDestroy()
{
this.selected_id.unsubscribe();
}
this will be clear the previous param value
这将清除之前的参数值
above logic working for me. hope it will help for you.
以上逻辑对我有用。希望对你有帮助。
[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
