本文介绍了“Angular中非亲子组件如何沟通”的知识。很多人在实际案例的操作中会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！
事实上，提到父组件和子组件之间的价值转移，我们很熟悉，这在业务实现中非常常见。
但是在实现的过程中，我涉及到了跨层次(即非父子组件之间的价值传递)。是的，我可以一层一层的向上传递，得到父组件中子组件的值。有没有更好的办法？
需求背景：
有一个子组件，可以理解为三级组件。该组件中有一个下拉框。单击某个li标记时，需要将相应的选定值传递给第一级组件。同时，第一级组件用接收到的值请求列表接口，然后刷新数据。
00-1010当时我就想过通过localstorage保存用户选择的值。在使用的组件中，我通过localstorage取出该值，并请求具有该值的接口。然而，它不可能是实时的。用户选择之后，并不会触发我从父组件获取数据，也就是如何通知父组件子组件中的值发生了变化。
最初思路：
Angular父组件和子组件通过服务来通讯
父组件及其子组件共享相同的服务，用于实现组件族内的双向通信。
服务实例的范围仅限于父组件及其子组件。此组件子树之外的组件将无法访问服务或与之通信。
技术点：
父组件及其子组件共享同一服务，用于在组件家族内部.实现双向通信
服务实例的范围仅限于父组件及其子组件。此组件子树之外的组件将无法访问服务或与之通信。
它是服务子组件和父组件之间的桥梁，因为服务可以很容易地注入到其他组件中，并且因为Subject对象可以向订阅这个对象的组件组播(传输)数据，所以通过组合Angular中的服务和rjs中的Subject，可以非常方便地实现组件之间的数据通信。
原理
使用以下代码在该子组件中创建服务文件：
从“@angular/core”导入{ injective }；
从“rxjs”导入{ Subject }；
@可注射({ 0
providedIn: '根'
})
exportclassheaderactorionservice {
publipagetenantmode=newSubjectstring()；
//获取一个可观察的；
missionConfirmed $=this . page tenantmode . asobservable()；
构造函数(){}
设置参数(参数){ 0
this . page tenant mode . next(params)；
}
}子组件数据层调用上述方法传入值。
这个。tenantmodeservice.setparams()父组件调用place注入上述服务，代码如下：
headerModeservice . missionconfirmed $。订阅(
()={
this . mode=headermordeservice . page tenant mode；
this . inittabledata()；
}
);以上就是《Angular的亲子成分如何在中国和非洲相互交流》的内容。感谢您的阅读。如果你想了解更多的行业，可以关注网站。边肖将为您输出更多高质量的实用文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/93192.html