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

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

"departments/:id/employees"

到目前为止还好。

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

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

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


当前回答

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 ';

其他回答

假设你想要刷新的组件的路由是视图,然后使用这个:

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

你可以在方法中添加一个调试器,以了解导航到“departments/:id/employees”后的确切路径。

我尝试了一些修复方法,但没有一个有效。我的版本很简单:在查询参数中添加一个新的未使用的参数

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

在我的例子中:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

正确的工作

试试这个

窗口。打开(“仪表板”、“_self ');

它的老方法,但适用于所有的角版本,它重定向路由和刷新页面。

从@angular/ Router中导入Router和ActivatedRoute

import { ActivatedRoute, Router } from '@angular/router';

注入Router和ActivatedRoute(以防你需要URL中的任何东西)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

从URL中获取所需的任何参数。

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

使用一个技巧,通过导航到一个虚拟url或主url,然后到实际url将刷新组件。

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

在你的情况下

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

如果你使用一个虚拟路由,那么你会看到一个标题闪烁'未找到',如果你已经实现了一个未找到的url,以防不匹配任何url。