当 Ionic 应用程序中的警报消息单击确定时重定向到其他页面

Question

我是 Ionic 的新手，正在开发 Ionic 应用程序。当用户设备位置关闭时，我确实在页面中显示了警报消息。此警报消息工作正常。现在我的要求是在警报消息单击确定时将应用程序重定向到不同的页面（home.page.html）。我用 return this.homePage 但它不起作用。我想我需要编写一些函数来将其重定向到家。下面是我的代码。

location.ts 页面：

ngOnInit() {
this.helperService.showLoader("Fetching your location");
this.mapElement = this.mapElement.nativeElement;
this.getUserLocation()
  .then((res) => {
    this.myLocation = res;
    this.helperService.hideLoader();
    return this.myLocation;
  })
  .catch((error) => {
      console.log('Error getting location', error);
      this.helperService.hideLoader();

      alert(
        "Location setting should be ON to use this feature, please turn it ON in the Location Settings on your phone "
      );

      return this.homePage;
  })

请帮助我如何做到这一点。谢谢

Answer 1

您应该使用 Ionic 警报而不是 JavaScript 警报。这将为您提供回调

我在下面添加了示例代码，请使用这个。我在示例代码中添加了两个ok and cancelbutton 如果你想要其中一个，你可以从数组中删除它

//导入声明

import { AlertController } from '@ionic/angular';

//构造函数

constructor(private alertController : AlertController) {
    
}

在你的页面类中添加这两个函数

ngOnInit() {
    this.helperService.showLoader("Fetching your location");
    this.mapElement = this.mapElement.nativeElement;
    this.getUserLocation()
      .then((res) => {
        this.myLocation = res;
        this.helperService.hideLoader();
        return this.myLocation;
      })
      .catch((error) => {
        console.log('Error getting location', error);
        this.helperService.hideLoader();

        this.presentAlertConfirm(
          "Location setting should be ON to use this feature, please turn it ON in the Location Settings on your phone "
        );

      })
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'application name',
      message: 'Location setting should be ON to use this feature, please turn it ON in the Location Settings on your phone',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
             //you can write your code or redirection 
             // sample redirection code 
             // this.router.navigate(['homepage'])
          }
        }
      ]
    });

    await alert.present();
  }

Answer 2

您可以使用 NavController 将应用程序导航到主页。

离子 V3：https://ionicframework.com/docs/v3/api/navigation/NavController/

Ionic V4+ : this.navCtrl.navigateRoot('/home');

使用烤面包机控制器代替 alert()

https://ionicframework.com/docs/api/toast

async ngOnInit() {
 this.helperService.showLoader("Fetching your location");
 this.mapElement = this.mapElement.nativeElement;
 this.getUserLocation()
  .then((res) => {
    this.myLocation = res;
    this.helperService.hideLoader();
    return this.myLocation;
  })
  .catch((error) => {
    console.log('Error getting location', error);
    this.helperService.hideLoader();

     const toast = await this.toastController.create({
     message: 'Location setting should be ON to use this feature, please turn it ON in the Location Settings on your phone ',
     position: 'top',
     buttons: [
       {
         text: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
        }, {
         text: 'Done',
         role: 'cancel',
         handler: () => {
           this.navCtrl.navigateRoot('/home');
         }
       }
    ]
  });
  toast.present();

})

您可以根据需要添加按钮