角 |导航时将参数传递给多个组件
Posted
技术标签:
【中文标题】角 |导航时将参数传递给多个组件【英文标题】: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
【讨论】:
以上是关于角 |导航时将参数传递给多个组件的主要内容,如果未能解决你的问题,请参考以下文章