如何在Angular的当前页面中执行某些操作时避免导航到另一个页面

Posted 2023-05-07

【中文标题】如何在Angular的当前页面中执行某些操作时避免导航到另一个页面

【英文标题】：How to avoid navigating to another page while doing something in current page in Angular

【发布时间】：2021-10-12 22:14:20

【问题描述】：

目前，我正在一个 html 页面上做一些事情。如果我错误地点击了另一个页面，那么它将重定向到该页面而无需任何用户确认。

这是我的组件。

export class MyComponent     
 constructor(private router: Router, public closeModal: ModalRef,)
 // 1st thing i tried
   router.events.subscribe((val) =>        
      if (val instanceof NavigationStart) 
        const config = 
          class: 'modal-lg, modal-danger',
          keyboard: false,
          animated: true,
          ignoreBackdropClick: true,
          initialState: 
            title: 'Are you sure you want to leave',
            content: `Are you sure you want to leave the page?`
          
        ;
        this.closeModal = this.modalService.show(DeleteConfirmModalComponent, config);
        this.closeModal.content.closeBtnName = 'Close';
      
    );


// 2 thing i tried

@HostListener('window:beforeunload', ['$event'])
  canDeactivate(event: BeforeUnloadEvent): void 
   
    const config = 
      class: 'modal-lg, modal-danger',
      keyboard: false,
      animated: true,
      ignoreBackdropClick: true,
      initialState: 
        title: 'Are you sure you want to leave',
        content: `Are you sure you want to leave the page?`
      
    ;
        this.closeModal = this.modalService.show(DeleteConfirmModalComponent, config);
        this.closeModal.content.closeBtnName = 'Close';

    event.returnValue = false;
  

第一次我得到确认，但已经导航到点击的页面rouetlink。

在 2 中，我看不到用户确认。

【参考方案1】：

RouteGuard 的方法CanDeactivate 正是你所需要的。

如果文档太枯燥，有一篇文章可以帮忙：Angular 10 CanDeactivate。

【参考方案2】：

使用async - await 方法

所以你可以导航部分等到过程/方法完成