Вы можете показать пользовательский загрузчик и собственный стиль для каждого компонента. например:
pageA
presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-a',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-a.gif" />`,
});
loading.present();
}
.page-a {
// STYLE THAT YOU NEED
}
pageB
presentLoading(message) {
let loading = this.loadingCtrl.create({
cssClass: 'page-b',
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="assets/loader-b.gif" />`,
});
loading.present();
}
.page-b {
// STYLE THAT YOU NEED
}
Также, если вы хотите использовать обычный загрузчик, создайте службу загрузки, например
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
@Injectable()
export class LoaderService {
public loading: any;
constructor(publicloadingCtrl: LoadingController) { }
async show(loaderClass, image) {
if (!this.loading) {
this.loading = await this.loadingCtrl.create({
cssClass: loaderClass,
dismissOnPageChange: false,
spinner: 'hide',
content: `<img class="load" src="'+image+'" />`
});
this.loading.present();
}
}
async hide() {
if (this.loading) {
await this.loading.dismiss();
this.loading = null;
}
}
}
Затем импортируйте сервис загрузчика на свою страницу.
import { LoaderService } from './../loader/loader.service';
constructor(private loader: LoaderService) {
}
async doSubmit() {
await this.loader.show('LOADER_CLASSNAME', 'YOUR_LOADER_IMAGE');
...stuff here
this.loader.hide();
}
. В приведенном выше случае вы можете показать пользовательский класс и изображение, просто передав их в качестве аргумента.