在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来