Angular rc3路由器-导航到具有不同参数的同一页面 [英] Angular rc3 router - Navigating to same page with different parameters

问题描述

我目前正在尝试使用不同的ID值导航到同一页面.因此，如果我在/test/1上并转到/test/2，浏览器中的URL将更新，但视图不会刷新.我调试了ngOnInit，并导航到/test/2时未重新运行.但是，如果我从test/1转到other，则路由工作正常，仅在导航至具有不同参数的相同路由时才会出现此问题.还有其他人遇到吗?当我生病时，请上传plunkr.

I'm currently trying to navigate to the same page with different id values. So if i am on /test/1 and go to /test/2 the url in the browser updates but the view does not refresh. I debugged ngOnInit and it did not rerun when navigating to /test/2. However if I go from test/1 to other the routing works fine, the issue only occurs when navigating to the same route with different parameters. Has anyone else come across this? When I get some time ill upload a plunkr.

Angular 2 rc3路由器3.0.0-beta.2

Angular 2 rc3 router 3.0.0-beta.2

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

谢谢， LL

推荐答案

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

When you navigate to same route with different param it reuse the component. Hence ngOnInit won't be called again. You should subscribe to routeparam in ngOnInit and then do the view update in subscribed function

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

Inject Activated route in constructor

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

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

In the ngOnInit method, we use the ActivatedRoute service to retrieve the parameters for our route

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);
   });
}

有关更多详细信息，请参见和获取路由参数"部分

For more details see and section "Getting the route parameter "

这篇关于Angular rc3路由器-导航到具有不同参数的同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！