如何订阅子路由中的param更改?

时间:2017-09-10 04:23:13

标签: javascript angular typescript

我有这些路线

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'explore',
    component: ExploreComponent,
    children: [
      { path: '', component: ProductListComponent },
      { path: ':categorySlug', component: ProductListComponent }
    ]
  }
];

这意味着用户可以转到

/explore(无类别)

/explore/computers(类别computers

从父(ExploreComponent)开始,我希望能够订阅categorySlug param更改,并处理事件。我怎么能这样做?

修改

我尝试使用以下订阅:

this.activatedRoute.firstChild.params.subscribe(console.log);

它给了我我想要的东西,但是一旦我去/explore(没有类别)就死了。它仅在使用/explore/:categorySlug链接导航时有效。

1 个答案:

答案 0 :(得分:0)

您可以订阅组件中的params并获取参数,例如像这样:

import { Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  this.route.params.subscribe(params => {
          this.categorySlug= params['categorySlug '];
      });

  // do something with this.categorySlug
}

旁注:一般情况下,您在网络应用中使用一种主详细信息结构,因此第一条路径转到主设备,第二条路径转到详细信息,每条路径都有不同的组件,但是如果你想为它们使用相同的组件,或者没有这样的主 - 细节关系,你应该检查参数是否为空。