我使用的是带有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`]);
但是什么都没有发生,为什么?
当前回答
我尝试了一些修复方法,但没有一个有效。我的版本很简单:在查询参数中添加一个新的未使用的参数
if (force) {
let key = 'time';
while (key in filter) {
key = '_' + key;
}
filter[key] = Date.now();
}
this.router.navigate(['.', { filter: JSON.stringify(filter) }]);
其他回答
对我来说是硬编码
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
// or
return true;
};
小技巧: 使用相同的路径和一些虚拟参数。例如,
refresh(){
this.router.navigate(["/same/route/path?refresh=1"]);
}
非常令人沮丧的是,Angular似乎仍然没有提供一个好的解决方案。我在这里提出了一个github问题:https://github.com/angular/angular/issues/31843
与此同时,这是我的变通办法。它建立在上面建议的一些其他解决方案的基础上,但我认为它更健壮一些。它涉及到将Router服务包装在一个“ReloadRouter”中,该服务负责重载功能,并将RELOAD_PLACEHOLDER添加到核心路由器配置中。这用于临时导航,避免触发任何其他路线(或警卫)。
注意:只有在需要重载功能的情况下才使用ReloadRouter。否则使用普通路由器。
import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class ReloadRouter {
constructor(public readonly router: Router) {
router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
}
public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
return this.router
.navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
.then(() => this.router.navigate(commands, extras));
}
}
这对我来说很管用
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));
订阅路由参数更改
// parent param listener ie: "/:id"
this.route.params.subscribe(params => {
// do something on parent param change
let parent_id = params['id']; // set slug
});
// child param listener ie: "/:id/:id"
this.route.firstChild.params.subscribe(params => {
// do something on child param change
let child_id = params['id'];
});