Angular rc3 路由器 - 使用不同参数导航到同一页面

Question

我目前正在尝试导航到具有不同 id 值的同一页面。因此，如果我在/test/1 上并转到/test/2，浏览器中的 url 会更新，但视图不会刷新。我调试了 ngOnInit，导航到 /test/2 时它没有重新运行。但是，如果我从test/1 转到other，路由工作正常，只有在使用不同参数导航到同一路由时才会出现问题。有没有其他人遇到过这个？当我有时间生病时上传一个 plunkr。

Angular 2 rc3 路由器3.0.0-beta.2

RouterConfig = [
    {
        path: '',
        component: 'Layout',
        children: [
            {
                path: 'test/:id',
                component: TestComponent
            },
            {
                path: 'other',
                component: OtherComponent
            }
        ]
    }
]

谢谢， LL

Answer 1

当您使用不同的参数导航到相同的路线时，它会重用该组件。因此ngOnInit 不会再被调用。 你应该订阅ngOnInit中的routeparam，然后在订阅的函数中进行视图更新

在构造函数中注入激活的路由

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

在ngOnInit方法中，我们使用ActivatedRoute服务来检索我们的路由参数

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
     let id = +params['id']; // (+) converts string 'id' to a number
     //here goes your logic like below
this.service.getHero(id).then(hero => this.hero = hero);
   });
}

更多详情see 和“获取路由参数”部分