使用主题的两个组件之间的角度通信答案

【问题标题】：Angular communication between two components using subject使用主题的两个组件之间的角度通信
【发布时间】：2020-06-23 20:36:30
【问题描述】：

我有两个角度组件，需要通过单击将对象从一个组件传递到另一个组件。我的第一个组件具有以下内容

showEventDetails(event: Event) {
    this.eventsService.sendEventDetail(event)
  }

这里的 Event 是我的自定义模型对象：

export class Event {
  id: number
  title: string
  description: string
  url: string
  date: string
}

事件服务文件如下：

export class EventsService {
  eventDetailSubject = new Subject<any>();

  constructor() {
  }

  sendEventDetail(event: Event) {
    this.eventDetailSubject.next(event);
  }

  getEventDetail(): Observable<Event> {
    return this.eventDetailSubject.asObservable();
  }

我的第二个组件有以下代码来接收事件数据。

this.eventsService.eventDetailSubject.subscribe(event => {
      this.eventCal = event
      this.isLoading = false
    }, error2 => {
      this.isLoading = false
      this.hasError = true
    })

但是，我注意到我无法在第二个组件中接收事件数据。我在这里想念什么？有没有其他方法可以将此事件对象从一个组件传递到另一个组件，而第二个组件不是第一个组件的子组件？

【问题讨论】：

标签： angular observable subject-observer

【解决方案1】：

RxJS Subject 只会在它收到订阅后的值时发出。相反，您可以使用缓冲区大小为 1 的ReplaySubject。它可以缓冲最后发出的值并在订阅时立即发出。

export class EventsService {
  eventDetailSubject = new ReplaySubject<any>(1);
  ...

【讨论】：

在不应该有默认值的情况下首选ReplaySubject，因为null 可能会导致意外错误