IonicのLoadingControllerをObservableで扱う
前置き
RxJSを勉強してある程度使えるようになり、
async/awaitは全部ぶっ潰したくなる病になってしまったが、
ionicのコンポーネントは公式で紹介されている書き方がほとんどasync/await。
page.tsの中のapi取得処理はObservableで書いており、
ObservableとPromiseの混在が気持ち悪かったので
Loading処理をObservableで使えるようにしてみた。
loadingのserviceを作成する
loader.service.ts
import { Injectable } from "@angular/core";
import { LoadingController } from "@ionic/angular";
import { Observable, from } from "rxjs";
import { flatMap, finalize } from "rxjs/operators";
@Injectable({
providedIn: "root"
})
export class LoaderService {
private loader = null;
constructor(public loadingController: LoadingController) {}
loading(obs$: Observable<any>): Observable<any> {
return from(this.openLoader()).pipe(
// ローディングを表示した後、引数で渡したobservable処理を開始
flatMap(() => obs$),
// 引数で渡したobservable処理が終わったらローディング表示が消える
finalize(() => this.closeLoader())
);
}
private async openLoader(): Promise<void> {
if (this.loader == null) {
this.loader = await this.loadingController.create({});
}
await this.loader.present();
}
private async closeLoader(): Promise<void> {
if (this.loader == null) return null;
await this.loader.dismiss();
this.loader = null;
}
}
各ページでのローディング記述
hoge.page.ts
fetchData(param) {
// API取得処理を定義して変数に格納
const obs$ = this.search(param).pipe(
tap(data => this.data = data)
);
// 定義したObservable処理をloadingServiceに渡してsubscribe
this.loaderService.loading(obs$).subscribe();
}
Author And Source
この問題について(IonicのLoadingControllerをObservableで扱う), 我々は、より多くの情報をここで見つけました https://qiita.com/pg_yamaton/items/9a74c9cd6b9e6c206760著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .