我使用的是带有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`]);
但是什么都没有发生,为什么?
当前回答
解决方案:
订阅URL参数并在那里初始化组件。没有技巧,只是“新URL ->新数据”,包括第一次加载。
对于URL参数(如/persons/:id):
constructor(protected activeRoute: ActivatedRoute, ...) {
this.activeRoute.paramMap.subscribe(paramMap => {
const id = paramMap.get('id'); // get param from dictonary
this.load(id); // load your data
});
}
对于URL查询参数(比如?q=…&returnUrl=…)(通常不是必需的):
this.activeRoute.queryParamMap.subscribe(queryParamMap => {
const returnUrl = queryParamMap.get('returnUrl');
...
});
问题的原因是:
当URL发生变化时,Angular会尽可能重用旧的组件,以节省计算机资源。加载数据是你的自定义代码,所以Angular不能为你做这件事。
其他回答
重载当前路由在angular 2非常有用的链接重载当前路由在angualr 2或4
在这里定义两种技术来做到这一点
使用虚拟查询参数 使用虚拟路由
欲了解更多信息,请参见上面的链接
如果你的navigate()没有改变浏览器地址栏上已经显示的URL,路由器就不需要做什么。刷新数据不是路由器的工作。如果希望刷新数据,可以创建一个注入到组件中的服务,并调用该服务上的加载函数。如果将检索新数据,它将通过绑定更新视图。
另一种选择是使用纯js,但页面实际上会刷新。
window.location.reload(true)
解决方案:
订阅URL参数并在那里初始化组件。没有技巧,只是“新URL ->新数据”,包括第一次加载。
对于URL参数(如/persons/:id):
constructor(protected activeRoute: ActivatedRoute, ...) {
this.activeRoute.paramMap.subscribe(paramMap => {
const id = paramMap.get('id'); // get param from dictonary
this.load(id); // load your data
});
}
对于URL查询参数(比如?q=…&returnUrl=…)(通常不是必需的):
this.activeRoute.queryParamMap.subscribe(queryParamMap => {
const returnUrl = queryParamMap.get('returnUrl');
...
});
问题的原因是:
当URL发生变化时,Angular会尽可能重用旧的组件,以节省计算机资源。加载数据是你的自定义代码,所以Angular不能为你做这件事。
决定何时存储路由返回false
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
并将router的导航值设置为false,表示该路由从未被路由
this.mySubscription = this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.router.navigated = false;
}
});