在Angular中,可以使用路由守卫和模态框服务来实现在每次路由变化时检查是否有打开的模态框。以下是一个解决方法的代码示例:
首先,创建一个名为ModalService
的服务来管理模态框的状态:
import { Injectable } from '@angular/core';
@Injectable()
export class ModalService {
private isOpen: boolean = false;
isOpened(): boolean {
return this.isOpen;
}
openModal(): void {
this.isOpen = true;
}
closeModal(): void {
this.isOpen = false;
}
}
接下来,在路由变化时检查模态框状态的路由守卫中使用ModalService
:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { ModalService } from './modal.service';
@Injectable()
export class ModalGuard implements CanActivate {
constructor(private modalService: ModalService, private router: Router) {}
canActivate(): boolean {
if (this.modalService.isOpened()) {
// 在这里进行处理,例如显示一个确认对话框
const confirmResult = confirm('是否关闭当前打开的模态框?');
if (confirmResult) {
this.modalService.closeModal();
} else {
// 取消导航
this.router.navigate([], { skipLocationChange: true });
return false;
}
}
return true;
}
}
最后,在路由配置中使用ModalGuard
来检查模态框状态:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ModalGuard } from './modal.guard';
const routes: Routes = [
{
path: 'example',
canActivate: [ModalGuard],
// 其他路由配置...
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
通过以上代码示例,我们可以在每次路由变化时检查是否有打开的模态框,并根据需要进行处理。