Angular |导航时将参数传递给多个组件

Question

我的应用程序中有这个结构：

<div class="container">
    <top-navbar></top-navbar>
    <router-outlet></router-outlet>
    <navbar></navbar>
</div>

所以，我有 TopNavbarComponent、router-outlet 和 NavbarComponent。

然后我创建 HomeComponent 和 AboutComponent。

假设我想像这样从“主页”导航到“关于”：

路径定义：

{ path: 'about/:parameter', component: AboutComponent },

在 HomeComponent 中我这样做：

this.route.navigate(['/about', 'a parameter'])

我的问题是：如何将参数传递给 TopNavbarComponent？ 所以我可以这样得到它：

this.activated_route.snapshot.params['parameter']

来自 TopNavbarComponent

有什么办法或者我应该采用另一种方法吗？

Solution does what I want but if anybody has an answer to go like I proposed it's welcome

Answer 1

使用查询参数

this.router.navigate(['/about'], { queryParams: { page: pageNum } });
//will give host-address/about?page=2

或者

this.router.navigate(['/about', { id: aboutId, foo: 'foo' }]);
 // will give host-address/about;id=15;foo=foo

Angular | Pass parameter to multiple components when navigate