angular - 如何在Angular 6的通用组件中获取参数值

Question

我有 HeaderComponent，它对所有页面都是通用的，并且出现在每个页面上。所以，我为 Header 创建了单独的组件，并使用选择器添加到 app.component.html 中。我创建了两个子页面“Home”和“Second”，并<router-outlet>在 app.component.ts 中使用

路线

const routes: Routes = [{
  path : "", component : HomeViewComponent
},{
  path : "second/:id/:category", component : SecondComponent
}];

我在第二个组件中传递参数 id 和 category。

在 HeaderComponent 中，我想在路由更改时获取此参数，所以我在header.component.ts中执行了以下代码

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

  ngOnInit() {
    this.router.events.subscribe((val) => {
      // see also 
      this.route.params.subscribe(params => {
        console.log(params);
      });
    });
  }

但是，我无法获得参数。我在控制台中收到 {} 空参数，我也附加了 stackblitz 链接。

https://stackblitz.com/edit/hardik?file=app%2Fapp.routing.module.ts

更新：我在所有页面中都有这个标题组件，而不仅仅是在第二个组件中。所以我不能只把它放在第二个组件中。

Answer 1

使用paramMap

this.router.events.subscribe((val) => {
  // see also 
    let id = this.route.snapshot.paramMap["id"]; 
    console.log(id)

});