有什么方法可以在离子应用程序中实现再试一次按钮吗？

Question

I want to create an app that has an alert for check connection with two button one is exit for the exit app and two is try again for check connection again, I searched about it and I tried about it, but I can n't solved this problem please help me.

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;
  }
}

This is my code that I was trying on, I work on this code but I do n't any answer, please help me.

Answer 1

You can make try again button with out any timer, you can use this code for your problem:

  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

I don't think you can have a alert box with two buttons because Alert box gives only one button "OK" to select and proceed. . You can show a modal instead of a alert box with as much button as you want.