从@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。

如果你通过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 11项目中使用这个:

reloadCurrentRoute() {
    const currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS:测试和工作在所有版本以上7。

解决方案:

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

试试这个

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

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

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

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”后的确切路径。