Где разместить мой контроллер загрузки при использовании pipe и подписаться?

Question

Я хочу иметь загрузочный контроллер, который загружается до тех пор, пока не будут получены данные из API. Теперь, так как я использую канал и подписку, я не знаю, где я должен разместить свою функцию контроллера загрузки. Обычно я просто инициализирую загрузчик сразу после вызова this.authService.apilogin(), но в моем варианте я как-то не могу этого сделать, так как у меня есть мой канал и я получаю ошибку. Где мне разместить функцию загрузчика?

page.ts

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();
        }

      )
  }
}

Answer 1

Как насчет сохранения ссылки на 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
      )
  }