Question

我正在尝试一个由3个组件组成的页面，以便使用数据服务相互通信。即，我有一个创建/编辑组件，应该添加事件，一个“下一个事件”组件，应该让我接受/拒绝事件，以及一个日历组件，应该让我看到所有即将发生的事件。

我的服务正在保留一个事件数组，并且我希望该数组对其他组件可见，并且每当我更新一个事件时，该更改都将分派给所有其他组件。为此，我试图使用Rxjs的BehaviourSubject，但是我碰到了一些障碍。每当创建新事件时，我都会在服务组件中执行所有添加逻辑，但除非重新加载日历（视图）组件，否则我看不到新事件添加。

服务组件类

 EXPORT CLASS eventService { 
  public Sevents = new BehaviorSubject<AgendaEvent[]>([]);
  private eventsToManipulate;

  constructor() { 
      this.getAllData();
  }

  getAllData() {
    this.http.get(url).subscribe(data => { 
    // here I map the events from the API to the eventsToManipulate 
            array
    this.Sevents.next(eventsToManipulate);
    }) 
  }

  addNewData(event) { 
    this.http.post(url, event).subscribe( 
    {
        this.eventsToManipulate.push(event);  
        this.Sevents.next(this.eventsToManipulate);
    });
  }

}

查看组件类

EXPORT CLASS eventView { 
events = new Array<Events>();

ngOnInit() {
     this.eventService .Sevents.subscribe( element => {
     console.log('this is element', element);
     this.events = element;
    })

}

按照我对RXjs的理解，“行为”主题应该在发生新数据后立即向所有订阅者发送有关新数据的更新。但是，我的代码似乎并非如此。

之前，我将通过强制组件使用事件Emiters一次又一次地加载数据来获得预期的效果，但是我正在寻找一些更灵活的RxJ实现方式

Answer 1

您需要在Observable中创建一个BehaviorSubject才能订阅更改。

尝试一下：

EXPORT CLASS eventService { 
  private Sevents = new BehaviorSubject<AgendaEvent[]>([]);
  public Sevents$: Observable<AgendaEvent[]>;
  private eventsToManipulate;

  constructor() { 
    this.Sevents$ = this.Sevents.asObservable();
    this.getAllData();
  }
  ...
}

查看组件类：

EXPORT CLASS eventView { 
  events = new Array<Events>();

  ngOnInit() {
    this.eventService.Sevents$.subscribe( element => {
      console.log('this is element', element);
      this.events = element;
    })

}

我在here上也有类似的经历

UI组件未根据数据更改进行相应更新

1 个答案: