如何等待异步管道完成并在之后调用另一个函数，而不订阅

Question

假设我有这个可观察的：

public settings$: Observable<
    SettingsResponse
  > = this._service.getSettings();

然后我有：

  public ngOnInit(): void {
        window.customService.init();
  }

因为 init 在 observable 完成之前触发，除了 setTimeout 或订阅 observable 并在触发之前使用非异步属性在模板中设置设置之外，是否还有其他方法可以延迟window.customService.init()？

Answer 1

您可以利用可观察对象，并使用共享，以便对多个async管道仅执行一个选项卡。

public settings$: Observable<SettingsResponse> = this._service.getSettings().pipe(
                        tap(()=> this.init()), 
                        share()
                  );

public init() {
    if (!this.initFlag) {
       window.customService.init();
       this.initFlag = true;
    }
}

您还可以使用扫描运算符，而不必跟踪该函数是否已被调用。

public settings$: Observable<SettingsResponse> = this._service.getSettings().pipe(
                        scan((acc, next)=> (acc === "first" && this.init(), next), "first"), 
                        share()
                  );

public init() {
   window.customService.init();
}

如果您只需要第一个发出的值，那么我会使用Finalize运算符。我认为它仍然会火async，但我从未尝试过。

public settings$: Observable<SettingsResponse> = this._service.getSettings().pipe(
                        first(),
                        finalize(() => window.customService.init()), 
                        shareReplay(1)
                  );