Ionic组件之Loading

效果图：

直接上代码

loading.ts

import { Component } from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Component({
    templateUrl:'loading.html'
})

export class Loading{
    constructor(public loadingCtrl:LoadingController){}
    presentLoading(){
        this.loadingCtrl.create({
            content:'请稍等...',
            duration:3000,
            dismissOnPageChange:true
        }).present();
    }
}

loading.html

<ion-header>
    <ion-navbar>
        <ion-title>Loading</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <button ion-button block (click)="presentLoading()">Show Loading</button>
</ion-content>