Angular - 通过BehaviorSubject 交换两个组件的数据

Question

我有以下带有BehaviorSubject的服务，用于将数据从组件A交换到组件B：

export class TimeconfirmationafterchangeService {   

data: BehaviorSubject<any> = new BehaviorSubject<any>(null);

constructor() {
  }
}

A组件设置数据如下：

timeconfirmationafterchange(scheduleIntervalContainersToConfirm: 
Array<Array<ScheduleContainer>>, scheduleIntervalContainers: 
Array<ScheduleContainer>, index: number) {
   let data = {
     institution: this.institution,
     index: index,
     scheduleContainers: scheduleIntervalContainers,
     scheduleIntervalContainersToConfirm: scheduleIntervalContainersToConfirm
    }
 this.timeconfirmationafterchangeService.data.next(data);
 this.route.navigate(['app/tabs/timeconfirmationafterchange']);
}

组件B这样使用它：

this.timeconfirmationafterchangeService.data.subscribe(timeConfirmationResponse => {
...

这一切都很好。我现在的问题是，组件 B 是否有可能调用函数或向组件 A 发送事件，也许是在 timeconfirmationafterchangeService 服务期间？

Answer 1

你必须使用带有主题的事件总线，我们可以使用两个属性，一个是

EventName

，用于过滤特定操作（有多个侦听器）另一个属性是数据，可用于传输数据.

export class TimeconfirmationafterchangeService {   
    data: BehaviorSubject<any> = new BehaviorSubject<any>(null);
    sub: Subject<any> = new Subject<any>();
    subObservable$!: Observable<any>;
    constructor() {
        this.subObservable$ = this.sub.asObservable();
    }

    emit(eventName: string, data = {}) {
        this.sub.next({eventName, data});
    }    
}

然后从子组件中我们触发发射。

someMethod() {
    this.timeconfirmationafterchangeService.emit('parentEvent', {test: 1});
}

在父级上，我们订阅可观察对象以接收事件，我们必须使用订阅取消订阅组件销毁时的侦听器，以防止内存泄漏。

export class ParentComponent {
    private subscription: Subscription = new Subscription();

    ngOnInit() {
        this.timeconfirmationafterchangeService.subObservable$.subscribe((event: any) => {
            if(event.eventName === 'parentEvent') {
                this.someMethodCall(event.data);
            }
        });
    }

---

下面的工作演示展示了事件总线的工作原理。

Stackblitz 演示