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

我认为您不能使用带有两个按钮的警报框，因为“警报”框仅提供一个按钮“确定”来选择并继续。。您可以根据需要显示一个模式框而不是一个带有多个按钮的警报框。

有什么方法可以在离子应用中实施“重试”按钮？

2 个答案: