Angular/Ionic5guardfornavigationpop”
创始人
2024-10-21 11:30:59
0

在Angular / Ionic 5应用程序中,导航弹出(navigational pop)是一种常见的方式,用于返回先前访问的页面。有时,我们需要在用户进行导航弹出之前进行一些额外的检查或验证。这就是guard在Angular / Ionic 5中派上用场的地方。

以下是实现guard以在导航弹出之前进行检查的示例代码:

首先,我们需要创建一个守卫service,我们可以使用Angular CLI来创建守卫。

ng generate service guards/auth

接下来,我们可以使用以下代码来拦截导航弹出并执行任何必要的验证。

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AlertController } from '@ionic/angular';
import { MyPage } from '../my/my.page';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanDeactivate {

  constructor(
    private alertController: AlertController
  ) { }

  canDeactivate(
    component: MyPage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {

      if (component.isDirty) {
        return new Promise((resolve, reject) => {
          this.alertController.create({
            header: '确认离开?',
            message: '你离开之前是否保存更改?',
            buttons: [
              {
                text: '保存',
                handler: () => {
                  // 保存数据
                  resolve(true);
                }
              },
              {
                text: '不保存',
                handler: () => {
                  // 不保存,离开页面
                  resolve(true);
                }
              },
              {
                text: '取消',
                role: 'cancel',
                handler: () => {
                  // 取消,留在页面
                  reject(false);
                }
              }
            ]
          }).then((alert) => alert.present());
        });
      } else {
        return true;
      }
  }
}

在MyPage中,我们可以添加一个属性来检测页面是否已被更改。

export class MyPage {

  isDirty = false;

  constructor() { }

  onInputChange() {
    this.isDirty = true;
  }

}

最后,我们需要在路由模块中添加guard来

相关内容

热门资讯

透视练习!newpoker脚本... 透视练习!newpoker脚本(透视)epoker透视(辅助)一贯一直都是有插件(哔哩哔哩)1、任何...
目前!菠萝德普辅助器免费版在哪... 目前!菠萝德普辅助器免费版在哪里(透视)兴动互娱技巧(果然是真的辅助下载)-哔哩哔哩1、下载好兴动互...
经核实!wepoker辅助软件... 经核实!wepoker辅助软件视频(透视)金虎爷有挂吗(其实有辅助插件)-哔哩哔哩1、在wepoke...
透视积累!红龙poker辅助(... 透视积累!红龙poker辅助(透视)pokerrrr2辅助(辅助)果然一直总是有工具(哔哩哔哩);1...
现有关情况通报如下!pokem... 现有关情况通报如下!pokemmo手机脚本辅助器(透视)透视辅助功能插件(好像真的是有辅助工具)-哔...
透视步骤!werplan怎么作... 透视步骤!werplan怎么作必弊(透视)拱趴大菠萝有挂吗(辅助)切实是有方法(哔哩哔哩)1、玩家可...
随着!扑克之星辅助(透视)浙江... 随着!扑克之星辅助(透视)浙江温州游戏辅助器(真是真的是有辅助工具)-哔哩哔哩1、浙江温州游戏辅助器...
透视学习!epoker免费透视... 透视学习!epoker免费透视脚本(透视)werplan免费挂下载(辅助)都是真的是有插件(哔哩哔哩...
据权威媒体报道!we poke... 据权威媒体报道!we poker游戏下(透视)创思维激k看底牌辅助开发商(原来有辅助神器)-哔哩哔哩...
透视演示!德州局透视(透视)i... 透视演示!德州局透视(透视)impoker辅助(辅助)切实一直总是有教程(哔哩哔哩)1、金币登录送、...