1

我对 Angular (10) 相当陌生，并试图掌握 Observables 的概念。我有一个服务和一个组件，服务用参与者填充一个数组，并且组件应该显示它们

服务

export class MercureService {

  private _participants = new BehaviorSubject<ParticipantDTO[]>([]);
  private participantList: Array<ParticipantDTO> = [];

  constructor() {
  }

  get participants$(): Observable<Array<ParticipantDTO>> {
    return this._participants.asObservable();
  }

  admin_topic(topic: AdminTopic): void {

    const url = new URL(environment.mercure);
    url.searchParams.append('topic', `${topic.sessionUuid}_${topic.userUuid}`);

    const eventSource = new EventSource(url.toString());
    eventSource.onmessage = event => {
      const json = JSON.parse(event.data);
      console.log('NEW EVENT');
      // ...
      if (json.event === BackendEvents.NEW_PARTICIPANT) {
        this.participantList.push({voter: json.data.voter, voterUuid: json.data.voterUuid, vote: '0'});
        this._participants.next(this.participantList);
      }
    };
  }

组件.ts

export class StartSessionComponent implements OnInit, OnDestroy {
  // ...
  unsubscribe$: Subject<void> = new Subject<void>();
  participantList: ParticipantDTO[];

  constructor(
    // ...
    public mercure: MercureService
  ) {}

  ngOnInit(): void {
    this.mercure.participants$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((data) => {
        this.participantList = data;
      });

    this.mercure.admin_topic({sessionUuid: '123', userUuid: '456'});
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

组件.html

...
  <div *ngFor="let participant of this.mercure.participants$ | async">
    <p>{{participant.voter}} - Vote ({{participant.vote}})</p>
  </div>
...

所以我没有发送消息，它被 EventSource 接收，console说

NEW EVENT

并且 UI 得到更新（添加一个新的<p>WHATEVER NAME - VOTE XXX</p>）。但是，当我从服务器发送第二条消息时，我得到

NEW EVENT

再次，但 UI 没有得到更新。我怀疑我对 Observable 做错了什么，有人可以帮忙吗？

4

2 回答 2

2

这是一种预期的行为，因为this.participantList它引用了一个已经由主题存储的值（因为引用没有被更改），您可能希望在每次要更新其值时传播您的数组以创建一个新数组：

this._participants.next(....this.participantList);
于 2020-09-16T21:50:01.120 回答
1

问题是 EventSource 事件是在 Angular 之外发出的，因此您内部发生的任何事情eventSource.onmessage都不会正确更新 UI。这就是为什么您需要在onmessageNgZone 的帮助下将发生的任何事情包装在 Angular 内部运行。

参见示例：

  constructor(
    private zone: NgZone
  ) { }

  admin_topic(topic: AdminTopic): void {
    const url = new URL(environment.mercure);
    url.searchParams.append('topic', `${topic.sessionUuid}_${topic.userUuid}`);

    const eventSource = new EventSource(url.toString());
    eventSource.onmessage = event => {
      this.zone.run(() => { // This is what you need
        const json = JSON.parse(event.data);
        console.log('NEW EVENT');
        // ...
        if (json.event === BackendEvents.NEW_PARTICIPANT) {
          this.participantList.push({ voter: json.data.voter, voterUuid: json.data.voterUuid, vote: '0' });
          this._participants.next(this.participantList);
        }
      })
    };
  }

另一种解决方案是使用 Event Source 包装器，它会为您做完全相同的事情，并为您提供易用性。它也会被包裹在 Observable 中，让你有丰富的经验。例如，请参阅这篇文章：使用 NgZone 和 Observable 包装的事件源

于 2020-09-17T11:44:34.327 回答