我使用的是带有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`]);
但是什么都没有发生,为什么?
当前回答
在参数更改时,重新加载页面将不会发生。这是一个很好的特性。不需要重新加载页面,但我们应该改变组件的值。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) {
}
其他回答
我尝试了一些修复方法,但没有一个有效。我的版本很简单:在查询参数中添加一个新的未使用的参数
if (force) {
let key = 'time';
while (key in filter) {
key = '_' + key;
}
filter[key] = Date.now();
}
this.router.navigate(['.', { filter: JSON.stringify(filter) }]);
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 ';
小技巧: 使用相同的路径和一些虚拟参数。例如,
refresh(){
this.router.navigate(["/same/route/path?refresh=1"]);
}
如果你通过Router Link改变路由,请遵循以下步骤:
constructor(public routerNavigate: Router){
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
this.router.navigated = false;
}
})
}
我相信这个问题已经在Angular 6+中(原生地)解决了;检查
这里https://github.com/angular/angular/issues/13831 && 在这里https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
但这适用于整个路由(包括所有子路由)
如果你想要针对单个组件,以下是方法: 使用可更改的查询参数,以便您可以任意多次导航。
在导航点(类)
this.router.navigate(['/route'], {
queryParams: { 'refresh': Date.now() }
});
在你想要“刷新/重载”的组件中
// . . . Component Class Body
$_route$: Subscription;
constructor (private _route: ActivatedRoute) {}
ngOnInit() {
this.$_route$ = this._route.queryParams.subscribe(params => {
if (params['refresh']) {
// Do Something
// Could be calling this.ngOnInit() PS: I Strongly advise against this
}
});
}
ngOnDestroy() {
// Always unsubscribe to prevent memory leak and unexpected behavior
this.$_route$.unsubscribe();
}
// . . . End of Component Class Body