Question

我有一个Angular 2/4服务，它使用observable与其他组件通信。

服务

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（参见上文）。但是，这些结果未反映在home组件中。我哪里错了？有关完整代码，请参阅plnkr.co/edit/V5AndArFWy7erX2WIL7N。

Answer 1

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

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

Plunker example

Answer 2

确保通过或使用其选择器加载了组件。我做了一个单独的组件，却忘了将其加载到应用程序中。

Angular服务不更新订阅的组件

2 个答案: