脚本宝典收集整理的这篇文章主要介绍了浅析Angular中非父子组件间怎么通讯,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。Angular中非父子组件间怎么通讯?本篇文章给大家介绍一下Angular非父子组件之间通过服务通讯的方法,希望对大家有所帮助!
其实提到父子组件之间传值,对我们来说,再熟悉不过了,在业务实现过程中很常见。
但是我在实现的过程中涉及到跨级了(也就是非父子组件之间传值),是的,我可以一层一层地往上传递,在父组件中拿到子组件的传值,那有没有更好的方式呢?【相关教程推荐:《angular教程》】
有一个子组件,可以理解为第三级组件,该组件中有个下拉框,当点击某个li标签的时候,需要将相应选中的值传给第一级组件,同时,一级组件带着接收到的值请求列表接口,进而刷新数据。
当时想着通过localstorage将用户选中的值保存下来,在使用的组件中,再通过localstorage将值取出来,拿着该值请求接口;但是,无法做到实时,用户选中后,没有触发我在父组件中获取数据,也就是子组件中的值改变了,如何通知到父组件。
Angular父组件和子组件通过服务来通讯
父组件和它的子组件共享同一个服务,利用该服务在组件家族内部实现双向通讯。
该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。
父组件和它的子组件共享同一个服务,利用该服务在组件家族内部实现双向通讯。
该服务实例的作用域被限制在父组件和其子组件内。这个组件子树之外的组件将无法访问该服务或者与它们通讯。 服务是子组件与父组件之间的桥梁,因为服务可以很方便的注入到其它的组件当中,又因为Subject对象可以将数据多播(传递)给订阅了这个对象的组件,因此结合Angular中的service和RxJS中的Subject可以很方便的实现组件间的数据通讯。
在该子组件中创建一个service文件,代码如下:
import { Injectable } From '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ PRovidedIn: 'root' }) export class HeaderActionService { public pageTenantMode = new Subject<string>(); // 获得一个Observable; missionConfirmed$ = this.pageTenantMode.asObservable(); constructor() {} setParams(params) { this.pageTenantMode.next(params); } }
子组件数据层调用上述方法,将值传进去。
this.tenantModeService.setParams()
父组件调用的地方注入上述服务,代码如下:
headerModeService.missionConfirmed$.subscribe( () => { this.mode = headerModeService.pageTenantMode; this.inittableData(); } );
更多编程相关知识,请访问:编程入门!!
以上就是浅析Angular中非父子组件间怎么通讯的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的浅析Angular中非父子组件间怎么通讯全部内容,希望文章能够帮你解决浅析Angular中非父子组件间怎么通讯所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。