我使用的是带有hashlocation策略的angular 2。
组件是用这个路由加载的:
"departments/:id/employees"
到目前为止还好。
在我成功批量保存多个编辑表行后,我想通过以下方式重新加载当前路由URL:
this.router.navigate([`departments/${this.id}/employees`]);
但是什么都没有发生,为什么?
我使用的是带有hashlocation策略的angular 2。
组件是用这个路由加载的:
"departments/:id/employees"
到目前为止还好。
在我成功批量保存多个编辑表行后,我想通过以下方式重新加载当前路由URL:
this.router.navigate([`departments/${this.id}/employees`]);
但是什么都没有发生,为什么?
当前回答
这就是我在Angular 12中所做的。我不确定这是否适用于9以下的版本。
当您需要重新加载时,您将需要调用它。
this.router.navigate([], {
skipLocationChange: true,
queryParamsHandling: 'merge' //== if you need to keep queryParams
})
Router forRoot需要将SameUrlNavigation设置为“reload”
RouterModule.forRoot(appRoutes, {
// ..
onSameUrlNavigation: 'reload',
// ..
})
你的每个路径都需要将runGuardsAndResolvers设置为always
{
path: '',
data: {},
runGuardsAndResolvers: 'always'
},
其他回答
在参数更改时,重新加载页面将不会发生。这是一个很好的特性。不需要重新加载页面,但我们应该改变组件的值。paramChange方法将在url更改时调用。所以我们可以更新组件数据
/product/: id / details
import { ActivatedRoute, Params, Router } from ‘@angular/router’;
export class ProductDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router) {
this.route.params.subscribe(params => {
this.paramsChange(params.id);
});
}
// Call this method on page change
ngOnInit() {
}
// Call this method on change of the param
paramsChange(id) {
}
EDIT
对于较新版本的Angular(5.1+),请使用@Simon McClive建议的答案
旧的答案
我在一个针对Angular的GitHub特性请求中找到了这个解决方案:
this._router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
};
this._router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
this._router.navigated = false;
window.scrollTo(0, 0);
}
});
我试着把它添加到我的app.component.ts ngOnInit函数中,它确实工作了。现在,在同一链接上的所有进一步单击都将重新加载组件和数据。
链接到原始GitHub功能请求
感谢GitHub上的mihaicux2。
我在4.0.0-rc版本上进行了测试。导入{Router, NavigationEnd} from '@angular/ Router ';
我使用setTimeout和navigationByUrl来解决这个问题…这对我来说很有效。
它被重定向到其他URL,而不是再次出现在当前URL…
setTimeout(() => {
this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
this.router.navigate([route]));
}, 500)
一个解决方案是传递一个虚拟参数(即以秒为单位的时间),这样链接总是被重新加载:
this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])
这招对我很管用:
let url = `departments/${this.id}/employees`;
this.router.navigated = false;
this.router.navigateByUrl(url);