Angular 兄弟组件之间的传值

news/2024/9/29 1:29:27
Angular 兄弟组件之间的传值 

在Angular中,兄弟组件之间直接传递数据并不直接支持,但可以通过以下几种方式实现通信:

1 使用服务(Service):
 创建一个服务,用于存储和管理需要共享的数据。
 在这个服务中定义一个BehaviorSubject或ReplaySubject(来自rxjs库),这些是可观察的对象,可以用来持有最新值并广播给所有订阅者。
 兄弟组件分别注入此服务,并通过订阅服务中的Subject来获取或更新数据。
2 使用RxJS的 Subjects: 直接在服务中使用Subject,原理与上述方法类似,但更直接地利用RxJS的功能进行通信。
3 父组件作为中介:如果两个兄弟组件有共同的父组件,可以让父组件充当数据传递的中间人。即父组件接收一个组件的数据,然后转发给另一个组件。
4 使用Angular的@Input() 和 @Output() 绑定:这种方法不直接用于兄弟组件间通信,但在某些结构下,可以通过父组件传递,间接实现。一个组件发出事件(@Output),父组件捕获后,再通过属性绑定(@Input)传递给另一个组件。
5 NgRx 或其他状态管理库:对于大型应用,可以考虑使用NgRx或其他状态管理库来统一管理应用状态,这样任何组件都可以访问和修改状态,实现跨组件通信。

这里比较推荐使用服务的方式,因为它既灵活又解耦,是处理兄弟组件间通信的标准做法。

采用方案一:

// service
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';// 引入
@Injectable({providedIn: 'root',
})
export class SharedDataService {private dataSource = new BehaviorSubject<any>(null);sharedData = this.dataSource.asObservable();constructor() {}changeData(data: any) {this.dataSource.next(data);}
}
// component A
import 我的服务 。。。
  import { Component2cService } from 'src/app/servicesCom/component2c.service';
export class ComponentA {constructor(private dataService: SharedDataService) {}sendData(data: any) {this.dataService.changeData(data);}
}// component B
import  我的服务  。。。
export class ComponentB {data: any;constructor(private dataService: SharedDataService) {this.dataService.sharedData.subscribe((data) => {this.data = data;});}
}

项目根目录执行:ng g s  myservices/showdialogService

案例简单说明:

 最后来一张测试截图(下面log可以看到获取到数据 true的弹窗信号)

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hjln.cn/news/47528.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

远光全栈AIGC数字创新平台入选“大模型行业应用十大典范案例”

6月4日至7日,由数字产业创新研究中心主办的2024中国数字企业峰会举行,远光软件自主研发的《全栈AIGC数字创新平台 YG-JT GPT》凭借其卓越的 AIGC技术创新实力与创新推广应用,成功入选“大模型行业应用十大典范案例”榜单。 本届峰会以“AI+ 数据x 向未来”为主题,聚焦AI+融…

《UML基础、案例与应用》习题记录-第20章

部分习题,使用visio或plantuml,非正确答案,仅供参考,欢迎评论,谢绝转载。 第20章 交互 20.6.2习题 1.略 2.3. 4. 5. 欢迎大家评论交流,发现博文中存在的问题一定要留言哦

远光九天平台荣获2024广东软件风云榜行业应用解决方案TOP10

6月13日,远光九天智能一体化云平台(简称:远光九天平台)在2024年粤港澳软件产业高质量发展大会、第十二届粤港云计算大会暨第七届粤港澳ICT大会,被授予2024广东软件风云榜“行业应用解决方案TOP10”奖项。 作为远光软件自主研发的全栈国产化技术底座,远光九天平台是采用云…

记录一下麒麟3.0内网安装python通过jdbc连接达梦6数据库

python通过jdbc连接达梦6麒麟3.0基于Red Hat 4.1.2-42,此版本可以编译python3.8.3,但是内网无法安装libffi-dev,导致无法安装JPype1和JayDeBeApi,所以改用python2.7.18 1、安装python2.7.18 https://www.python.org/ftp/python/2.7.18/Python-2.7.18.tgz# 解压 tar -zxvf P…

生成SSL证书

生成SSL证书SSL 是一种加密协议,用于在网络通信中提供数据的保密性和完整性。它使用公钥和私钥来建立安全的连接,并对传输的数据进行加密和解密,以防止未经授权的访问和篡改。根据文章操作,生成以下四个文件用于存储与 SSL 相关的密钥、证书和信任的根证书。client.keystor…

Flink状态(二)

Flink提供了不同的状态存储方式,并说明了状态如何存和存储在哪里。 状态可以被存储在Jvm的堆和堆外。根据状态存储方式的不同,Flink也能代替应用管理状态,意思是Flink能够进行内存管理(有必要的时候,可能会溢出到硬盘),允许应用保存非常大的状态。默认情况下,在配置文件fli…

服务器数据恢复成功案例

一、服务器数据恢复描述 需要进行数据恢复的服务器为OceanStor S6800T,服务器硬件配置情况为15块磁盘组成一组80T大小的raid5阵列,阵列划分为两个lun、三个分区。服务器重装系统后发现磁盘分区丢失了一个,需要进行服务器数据恢复。二、服务器数据备份 服务器数据恢复第一步需…

使用 TensorRT C++ API 调用GPU加速部署 YOLOv10 实现 500FPS 推理速度——快到飞起!!

NVIDIA TensorRT ™ 是一款用于高性能深度学习推理的 SDK,包含深度学习推理优化器和运行时,可为推理应用程序提供低延迟和高吞吐量。YOLOv10是清华大学研究人员近期提出的一种实时目标检测方法,通过消除NMS、优化模型架构和引入创新模块等策略,在保持高精度的同时显著降低…