显示加载,警报和日志的ionic2最佳实践是什么?

时间:2018-03-09 09:54:35

标签: angular typescript ionic2

我正在寻找ionic2最佳做法来显示负载,警报和控制台日志..

所以不要在每个页面中重复下面的代码,这样我就可以调用一次。

例如显示加载的代码:

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: ''
    });
    this.loading.present();
  }

创建提供程序是最佳做法,并显示上次加载?或者提供者不支持加载或类似的东西?

感谢。

2 个答案:

答案 0 :(得分:5)

我通常会创建一个lib文件夹(或模块,如果你想要的话)。然后,我创建了一些提供者。对于提醒,您可以创建提供者:

import { Injectable } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Injectable()
export class Alert {

  constructor(
    public alertCtrl: AlertController
  ) {}

  show(title: string, subTitle: string, buttons: Array<string>): void{
    let alert = this.alertCtrl.create({
      title: title,
      subTitle: subTitle,
      buttons: buttons
    });
    alert.present();
  }
}

或者加载例如:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Injectable()
export class Loader {

  loader: any;

  constructor(
    public http: HttpClient,
    public loadingCtrl: LoadingController
  ) {}

  present(msg = `Please wait...`) {
    this.loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    this.loader.present();
  }

  dismiss() {
    this.loader.dismiss();
  }
}

然后,您可以在模块路径映射的任何组件中重用,例如:

import { Alert, Toast } from '@lib';

这是最佳做法吗?是的,我认为。您编写的代码较少,您可以重用您的lib提供程序。

希望我能帮忙!

答案 1 :(得分:0)

我通常会创建一个UtilProvider然后创建一个方法来显示加载对话框,例如:

public getLoading(message?) {
    if (!message) {
      message = 'Loading...';
    }
    return this.loadCtrl.create({content: message});
  }

您可以添加超时或仅返回create,然后致电present(),然后再dismiss()

我认为将它用于AlertController并不是很好,因为你不会处理de按钮点击