router.navigateByUrl 后刷新组件为同一个 URL 参数不同

Question

我有一个包含以下路由的路由器 <router-outlet></router-outlet>：

{ path: 'employee/:id', component: EmployeeComponent }

由于 EmployeeComponent 组件已经位于具有特定员工的路由器插座中，我在我的代码中执行以下操作：this.router.navigateByUrl('/employee/'+this.employee2);

url发生变化，但组件并没有对新的Employee执行ngOnInit()方法，内容也没有刷新。我需要使用路由器上已有的 EmployeeComponent 来实例化一个新的 EmployeeComponent，或者刷新现有的。如何解决？

Answer 1

需要注入"ActivatedRoute"并订阅参数

constructor(route:ActivatedRoute){
      route.params.subscribe(val=>{ 
       //    add to do function()
      })
   }

Answer 2

你可以利用AcitvatedRoute。

import { ActivatedRoute } from "@angular/router";

constructor(private route: ActivatedRoute) { }

使用参数

ngOnInit(){
  this.route.params.subscribe(param=>{
    console.log(+params['id'])
  })
}

Refresh component after router.navigateByUrl to the same URL with different parameters