javascript - Angular 服务不更新订阅的组件

Question

我有一个 Angular 2/4 服务，它使用可观察量与其他组件进行通信。

服务:

let EVENTS = [
    {
      event: 'foo',
      timestamp: 1512205360
    },
    {
      event: 'bar',
      timestamp: 1511208360
    }
  ];

@Injectable()
export class EventsService {

  subject = new BehaviorSubject<any>(EVENTS);

  getEvents(): Observable<any> {
    return this.subject.asObservable();
  }

  deleteEvent(deletedEvent) {
    EVENTS = EVENTS.filter((event) => event.timestamp != deletedEvent.timestamp);
    this.subject.next(EVENTS);
  }

  search(searchTerm) {
    const newEvents = EVENTS.filter((obj) => obj.event.includes(searchTerm));
    this.subject.next(newEvents);
  }
}

我的 home 组件能够订阅此服务并在删除事件时正确更新:

export class HomeComponent {

  events;
  subscription: Subscription;

  constructor(private eventsService: EventsService) { 
    this.subscription = this.eventsService.getEvents().subscribe(events => this.events = events);
  }

  deleteEvent = (event) => {
    this.eventsService.deleteEvent(event);
  }
}

我还有一个显示搜索表单的根组件。提交表单后，它会调用该服务，该服务执行搜索并使用结果调用 this.subject.next(参见上文)。但是，这些结果并未反射(reflect)在 home 组件中。我哪里错了？完整代码请参见plnkr.co/edit/V5AndArFWy7erX2WIL7N .

Answer 1

如果您多次提供服务，您将获得多个实例，但这不适用于通信，因为发送者和接收者没有使用同一个实例。

要为整个应用程序获取单个实例，请在 AppModule 中提供服务，而不是在其他地方提供服务。

Plunker example