你可以使用Angular路由守卫来实现在点击“确定”之前进行重定向。下面是一个示例代码:
首先,创建一个名为confirm.guard.ts
的路由守卫文件。
import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import Swal from 'sweetalert2';
@Injectable({
providedIn: 'root'
})
export class ConfirmGuard implements CanDeactivate {
canDeactivate(
component: unknown,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot
): Observable | Promise | boolean | UrlTree {
return Swal.fire({
title: 'Are you sure?',
text: 'You will be redirected to another page.',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, redirect me!',
cancelButtonText: 'No, stay here'
}).then((result) => {
if (result.isConfirmed) {
return true; // 允许重定向
} else {
return false; // 取消重定向
}
});
}
}
然后,在你的路由模块中使用这个路由守卫。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ConfirmGuard } from './confirm.guard';
const routes: Routes = [
{ path: '', component: HomeComponent, canDeactivate: [ConfirmGuard] },
{ path: 'about', component: AboutComponent, canDeactivate: [ConfirmGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在,当用户在离开HomeComponent
或AboutComponent
之前点击“确定”按钮时,将弹出一个确认对话框。如果用户确认重定向,就会进行重定向;如果用户取消,就会留在当前页面。
上一篇:angular - strictTemplates true 忽略类型保护
下一篇:Angular - 添加 -js 文件出现“Uncaught SyntaxError: Unexpected string”错误。