如何订阅子路由中的参数更改？

Question

我有这些路线

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 参数更改，当然可以处理事件。我该怎么做？

编辑：

我尝试使用以下方式订阅：

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

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

Answer 1

您可以订阅组件中的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
}

旁注：一般来说，您在 Web 应用程序中使用一种主从结构，所以第一个路径去主路径，第二个路径去细节，每个路径都有不同的服务组件，但是如果你想对它们都使用相同的组件，或者没有这样的主从关系，你应该检查参数是否为空。