Angular 订阅 observable - 只需要请求后的值

Question

我有一个看起来像这样的服务：

export class WebViewService {

  private webViewMessage = new ReplaySubject<any>(1);
  public webViewMessage$ = this.webViewMessage.asObservable();

  public isWebView: boolean = false;
  constructor() {
    this.isWebView = false;

    if (window?.chrome?.webview)
    {
      this.isWebView = true;
    }
   
    window?.chrome?.webview?.addEventListener('message', (event: { data: any; }) => {
      this.webViewMessage.next(event.data);
    });
  }

  public postMessage(message: any) {
    window?.chrome?.webview?.postMessage(message);
  }
}

我有一个看起来像这样的组件：

export class BrowserComponent implements OnInit {

  constructor(private webViewService: WebViewService) { }

  subscription!: Subscription;

  ngOnInit(): void {
    this.subscription = this.webViewService.webViewMessage$.subscribe(o => {
      alert(o);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  onClick() {
    this.webViewService.postMessage("showDialog");
  }
}

当调用 onClick() 方法时，通过 webViewService 发布一条消息，这反过来导致父 window（windows 表单）显示文件对话框，然后我想要知道响应是什么，这将在 webViewMessage$ 中。我现在在订阅中显示一个 alert()，但将来会有所不同。

问题：当我离开 Browse 组件然后再次进入时，警报弹出最后一个 webViewMessage$，这是我所期望的，但不是我想要的。

我可以将 onClick() 代码更改为如下内容：

  onClick() {
    this.webViewService.postMessage("showDialog");
    this.subscription = this.webViewService.webViewMessage$.subscribe(o => {
      alert(o);
      this.subscription.unsubscribe();
    });
  }

但是，当我再次单击 onClick() 按钮时，这会弹出最后一条消息 - 我知道为什么会发生这种情况，但我无法“等待”postMessage() 方法接收响应.但同样，我只想要在调用 this.webViewService.postMessage() 之后收到的消息。我该怎么做？？

Answer 1

A BehaviorSubject 用于保留最后发出的值。这就是为什么当你创建它时，你必须提供一个默认值。

A ReplaySubject 用于保留给定数量的发射值。创建它时，您必须指定要保留多少个值。

相反，使用 Subject，观察者仅在发送值时触发，并且不会保留最后发出的值。

private webViewMessage = new Subject<any>();

Angular 订阅 observable - 只需要请求后的值

Angular subscription to observable - only want value after request for it

angular

rxjs-observables

webview2