ionic封装

版权声明：本文为作者原创，转载请注明出处。 https://blog.csdn.net/vop444/article/details/81436186

前言

在ionic技术栈的开发中中有很多零碎的功能或者服务，通过每次注入的方式都比较麻烦, 所以需要对一些通用的功能进行一些封装(通用的UI封装成指令，通用的逻辑封装成服务) ，下面对通知栏封装进行举例。

关键代码和注释

封装类为baseui，包含公众方法的抽象类，

baseui.ts代码

import { Loading, LoadingController,ToastController,Toast} from "ionic-angular";

/**
 * UI 层的所有公用方法的抽象类
 * 
 * @export
 * @abstract
 * @class BaseUI
 */
export abstract class BaseUI {
    constructor() {
        
    }
/**
 * loading加载页面
 * 
 * @protected
 * @param {LoadingController} loadingCtrl 
 * @param {string} message 
 * @returns {Loading} 
 * @memberof BaseUI
 */
protected showLoading(loadingCtrl:LoadingController,
        message:string):Loading{
        let loader=loadingCtrl.create({
            content:message,
            //页面变化的时候自动关闭loading
            dismissOnPageChange:true
        });
        loader.present();
        return loader;
    }

    /**
     * 通用的展示 toast 的组件
     * 
     * @protected
     * @param {ToastController} toastCtrl 
     * @param {string} message 
     * @returns {Toast} 
     * @memberof BaseUI
     */
    protected showToast(toastCtrl: ToastController, message: string): Toast {
        let toast = toastCtrl.create({
            message: message,
            duration: 2000, //默认展示的时长
            position: 'top'
        });
        toast.present( );
        return toast;
    }
}

在所引用的ts文件中，需要定义BaseUI

import { BaseUI } from '../../../common/baseui';

然后继承BaseUI

export class AllPersonnelPage extends BaseUI {
  }
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private http: InterceptorProvider,
    public toastCtrl:ToastController,
    public alertCtrl:AlertController,
  ) {
   super(); 
  }

此时定义super()超类

引用此通知栏代码

super.showToast(this.toastCtrl, "加分成功")