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

Posted 2023-03-13

【中文标题】Angular rc3 路由器 - 使用不同参数导航到同一页面

【英文标题】：Angular rc3 router - Navigating to same page with different parameters

【发布时间】：2016-11-16 09:42:00

【问题描述】：

我目前正在尝试导航到具有不同 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

【参考方案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 和“获取路由参数”部分

【讨论】：

嗯，我明白了。我的问题是我在 ngOnInit 中进行了服务调用，而不是我的 params 订阅。谢谢阿加瓦尔