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

Posted 2023-02-23

【中文标题】角 |导航时将参数传递给多个组件

【英文标题】：Angular | Pass parameter to multiple components when navigate

【发布时间】：2019-08-26 08:25:06

【问题描述】：

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

<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

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

解决方案可以满足我的需求，但如果有人像我一样有答案 建议欢迎

【问题讨论】：

您可以使用共享服务或监听TopNavbarComponent中的路由变化

你能发布一个解决方案吗，我是 Angular 新手，我不会放弃抓住你的提议。感谢您的努力！

你试过pass输入吗？ <top-navbar [param]="value"></top-navbar> 并在父组件中接收它

【参考方案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