有什么方法可以将重试按钮实现到离子应用程序中吗？

Question

我想创建一个具有检查连接警报的应用程序，其中有两个按钮，一个是用于退出应用程序的退出，另一个是用于再次检查连接的重试，我搜索了一下，试了一下，还是解决不了这个问题，求大神指点。

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
import { AlertController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class CheckInternetService {

  public base: string; // this will be set in the constructor based on if we're in dev or prod
  timer: any;

  constructor(private network: Network, private alertCtrl: AlertController) {}

  async presentAlert() {
    const alert = await this.alertCtrl.create({
      header: 'خطا',
      backdropDismiss: false,
      subHeader: 'قطعی انترنت',
      message: 'لطفا انترنت خودرا چک کنید',
      buttons: [{
        text: 'خروج',
        handler: () => {
          navigator['app'].exitApp();
        }
      },
      {
        text: 'تلاش مجدد',
        handler: () => {
          this.doSomething().then(res => {
            this.checkConnection();
          });
        }
      }
    ],
    });
    await alert.present();
  }

  doSomething() {
    return new Promise((resolve, reject) => {
      // pretend a long-running task
      this.timer = setTimeout(() => { resolve(true); }, 3000);
    });
  }

  checkConnection(): boolean {

    if (document.URL.includes('https://') || document.URL.includes('http://')) {
      this.base = 'http://127.0.0.1:3001/';
    } else {
      this.base = 'https://url.to_actual_URL.com/';
    }
    const type = this.network.type;

    let online;

    if (type === 'unknown' || type === 'none' || type === undefined) {
      online = false;
      this.presentAlert();
    } else {
      online = true;
      clearTimeout(this.timer);
    }

    this.network.onDisconnect().subscribe( () => {
      online = false;
      this.presentAlert();
    });

    this.network.onConnect().subscribe( () => {
      online = true;
      clearTimeout(this.timer);
    });

    return online;
  }
}

这是我正在尝试的代码，我正在处理这段代码，但我没有任何答案，请帮助我。

Answer 1

您可以在没有任何计时器的情况下重试按钮，您可以使用此代码解决您的问题：

  async presentAlert() {
    this.alertCtrl.dismiss();
    const alert = await this.alertCtrl.create({
      header: 'خطا',
      backdropDismiss: false,
      subHeader: 'قطعی انترنت',
      message: 'لطفا انترنت خودرا چک کنید',
      buttons: [{
        text: 'خروج',
        handler: () => {
          navigator['app'].exitApp();
        }
      },
      {
        text: 'تلاش مجدد',
        // role: 'cancel',
        handler: () => {
          // this.doSomething().then(res => {

          // this.checkConnection();
          // });
          const type = this.network.type;

          if (type === 'unknown' || type === 'none' || type === undefined) {
            this.presentAlert();
          }

        },
      }
    ],
    });
    await alert.present();
  }

Answer 2

我不认为你可以有一个带有两个按钮的警告框，因为警告框只提供一个按钮 "OK" 到 select 并继续。 .您可以显示一个模态而不是一个带有任意多个按钮的警告框。

有什么方法可以将重试按钮实现到离子应用程序中吗？

Is there any way to implement try again button into ionic app?

javascript

ionic-framework

angular

ionic4