CoreUI Angular模板中实现导航确认对话框的最佳实践

在基于CoreUI的Angular管理模板开发过程中，我们经常需要实现这样的交互场景：当用户点击侧边栏导航项时，先弹出确认对话框，待用户确认后再跳转到目标页面。这种需求在涉及数据保护或重要操作时尤为常见。

事件监听方案

CoreUI的导航项配置接口INavData提供了attributes属性，这为我们实现DOM事件监听创造了条件。我们可以通过以下步骤实现：

1. 配置导航项属性
   在navItems配置中为需要确认的导航项添加唯一标识：

   export const navItems: INavData[] = [
     {
       name: '关键操作',
       url: '/sensitive-route',
       attributes: { id: 'sensitive-nav-item' }
     }
   ];
   

2. 组件层实现监听
   在布局组件中使用Angular的EventManager服务：

   @Component({...})
   export class DefaultLayoutComponent implements AfterViewInit {
     private readonly document = inject(DOCUMENT);
     private readonly eventManager = inject(EventManager);
     private readonly modalService = inject(ModalService);
   
     ngAfterViewInit() {
       const navItem = this.document.getElementById('sensitive-nav-item');
       if (navItem) {
         this.eventManager.addEventListener(
           navItem, 
           'click',
           (event: MouseEvent) => {
             event.preventDefault();
             this.showConfirmationDialog();
           }
         );
       }
     }
   }
   

对话框集成方案

CoreUI内置了强大的模态框服务，我们可以充分利用这一特性：

1. 确认对话框实现

   private showConfirmationDialog() {
     this.modalService.show({
       title: '操作确认',
       content: '您确定要执行此操作吗？',
       buttons: [
         { text: '取消', role: 'cancel' },
         { 
           text: '确认', 
           handler: () => {
             // 执行实际导航逻辑
             this.router.navigateByUrl('/sensitive-route');
           }
         }
       ]
     });
   }
   

架构优化建议

对于更复杂的场景，建议采用以下架构模式：

1. 路由守卫方案
   创建CanActivate守卫来处理导航前的确认逻辑，这种方式更符合Angular的路由哲学。

2. 服务封装
   将确认逻辑封装为可复用的服务：

   @Injectable()
   export class NavigationConfirmService {
     constructor(
       private modalService: ModalService,
       private router: Router
     ) {}
   
     confirmNavigation(url: string, message: string) {
       return this.modalService.show({
         /* 对话框配置 */
       });
     }
   }
   

注意事项

1. 内存管理：手动添加的事件监听器需要在组件销毁时移除
2. 无障碍访问：确保模态框符合WCAG标准
3. 移动端适配：测试触摸设备上的交互体验
4. 性能考量：避免在大量导航项上使用此模式

通过这种实现方式，我们既保持了CoreUI模板的原有风格，又增强了关键操作的安全性，为用户提供了更友好的交互体验。