我使用的是带有hashlocation策略的angular 2。

组件是用这个路由加载的:

"departments/:id/employees"

到目前为止还好。

在我成功批量保存多个编辑表行后,我想通过以下方式重新加载当前路由URL:

this.router.navigate([`departments/${this.id}/employees`]);

但是什么都没有发生,为什么?


当前回答

对我来说是硬编码

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

其他回答

小技巧: 使用相同的路径和一些虚拟参数。例如,

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

对我来说是硬编码

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

在控制器中创建一个重定向到预期路由的函数,如下所示

redirectTo(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

然后像这样使用它

this.redirectTo('//place your uri here');

该功能将重定向到一个虚拟路由,并在用户没有意识到的情况下快速返回到目标路由。

一个解决方案是传递一个虚拟参数(即以秒为单位的时间),这样链接总是被重新加载:

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

解决方案:

订阅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不能为你做这件事。