Angular 兄弟组件之间的传值

Angular 兄弟组件之间的传值 

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

使用服务(Service):
 创建一个服务，用于存储和管理需要共享的数据。
 在这个服务中定义一个BehaviorSubject或ReplaySubject（来自rxjs库），这些是可观察的对象，可以用来持有最新值并广播给所有订阅者。
 兄弟组件分别注入此服务，并通过订阅服务中的Subject来获取或更新数据。

使用RxJS的 Subjects:
直接在服务中使用Subject，原理与上述方法类似，但更直接地利用RxJS的功能进行通信。

父组件作为中介:
  如果两个兄弟组件有共同的父组件，可以让父组件充当数据传递的中间人。即父组件接收一个组件的数据，然后转发给另一个组件。

4 使用Angular的@Input() 和 @Output() 绑定:
 这种方法不直接用于兄弟组件间通信，但在某些结构下，可以通过父组件传递，间接实现。一个组件发出事件（@Output），父组件捕获后，再通过属性绑定（@Input）传递给另一个组件。

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) => {
　　　　if(data){// 判断一下，不然第一次容易抛null 异常

      　　this.data = data;

　　　　}

    });
  }
}

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

案例简单说明：

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