Javascript 使用管道和订阅时，在何处放置加载控制器？

我想有一个加载控制器，它一直在加载，直到有来自api的数据。现在，由于我正在使用pipe和subscribe，我不知道我必须将加载控制器函数放在哪里。我通常只会在调用

this.authService.apilogin（）

之后初始化加载程序，但在我的变体中，我不知怎么地无法这样做，因为我的管道在那里，我得到了一个错误。我应该把我的加载器函数放在哪里

第页

apiSubmit() {
  this.submitted = true;

  // if form is invalid => stop
  if (this.loginForm.invalid) {
      return;
  }
  this.isLoading = true;
  this.authService.apilogin(
  this.f.username,
  this.f.password)
  this.loadingController // Ladebalken ->User kann nichts machen
  .create({keyboardClose: true, message: 'Logging in...', spinner: 'crescent'})
  .then(loadingEl => {
    loadingEl.present();
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate([this.returnUrl]);
          this.isLoading = false;
          loadingEl.dismiss();
        },
        error => {
          this.error = error;
          this.isLoading = false;
          loadingEl.dismiss();
        }

      )
  }
}

---

保留对

loadingEl

的引用如何

  loadingEl : any;

  constructor(public loadingController: LoadingController) {
    this.loadingController.create().then(x => this.loadingEl = x)
  }

  apiSubmit() {
    this.loadingEl.present()
    this.authService.apilogin(this.f.username, this.f.password)
      .pipe(
        tap(x => this.loadingEl.dismiss()),
      )
      .subscribe(
        data => this.router.navigate([this.returnUrl]),
        error => this.error = error
      )
  }