Ionic: Использование LoadingController

В этой заметке я расскажу как использовать LoadingController в своих приложениях. Это модальный элемент, который показывается в момент какой-то либо операции, когда пользователь должен дождаться ее выполнения и не иметь возможность взаимодействия с интерфейсом.


Пример лоадера

Использование очень простое. Для начала нам нужно импортировать LoadingController в свой модуль (класс, вид):

import {
    LoadingController
} from 'ionic-angular';

Далее определить его в конструкторе:

constructor(public loadingCtrl: LoadingController) {
    // TODO: ...
}

Код ниже создает экземпляр лоадера:

let loading = this.loadingCtrl.create(); // Экземпляр
loading.setContent('Loading..'); // Надпись внутри лоадера
loading.present(); // Отобразить лоадер
Надпись лоадера можно менять в райнтайме путем использования метода setContent('Новый текст');

Чтобы скрыть лоадер, нужно вызвать метод dismiss:

loading.dismiss();

Вот как может выглядеть пример метода с использованием:

public demoLoader() {
    let loading = this.loadingCtrl.create();
    loading.setContent('Loading..');
    loading.present(); 
	
    setTimeout(() => { 
        loading.dismiss(); // Лоадер будет убран через 3 секунды
    }, 3000);
}

Про другие опции и свойства лучшее почитать в документации Ionic.