本文共 1644 字，大约阅读时间需要 5 分钟。

ionic4

  最近小咸儿一直在学习ionic4，因为项目的需要所以将Loading与Toast抽取成公共方法，以方便各个页面的调用。接下来看看具体的baseui.ts文件该如何创建：

common

  首先需要在src文件夹下创建一个common文件，小咸儿在里面创建了一个baseui.ts的文件，ionic4中的Loading方法和ionic3发生了一些些变化，详细可见如下：

baseui.ts文件：

import { LoadingController, ToastController } from '@ionic/angular';export abstract class BaseUI {    constructor() {    }    /**     * loading加载页面     * @param {LoadingController} loadingCtrl     * @param {string} message     * @returns {Loading}     * @memberof BaseUI     */    protected async showLoading(loadingCtrl: LoadingController,            message: string) {            const loader = await loadingCtrl.create({                message: message            });            await loader.present();            return loader;         }    /**     * Toast全局提示     * @param {ToastController} toastCtrl     * @param {string} message     * @returns {toast}     * @memberof BaseUI     */    protected async showToast(toastCtrl: ToastController, message: string) {        const toast = await toastCtrl.create({            message: message,            duration: 2000,  // 默认展示的时长            position: 'top'        });        await toast.present();        return toast;    }}

引用页面：

import { ModalController, LoadingController } from '@ionic/angular';import { BaseUI } from '../../common/baseui';

super.showloading(this.loadingCtrl, '请稍等……');// 解除loading的状态this.loadingCtrl.dismiss();

  除此之外，还有以下其他的属性以及方法可以调用，具体参考ionic4官网：

if (userCode === '' || password === '') {      super.showToast(this.toastCtrl, '账号或者密码不能为空哦~');      return;}

显示页面：

转载地址：http://bcerb.baihongyu.com/