Angular：如何防止默认路由器事件

Question

在我的应用程序组件中，我正在检查路线变化时是否有任何打开的模式。在那种情况下，我想

• 关闭打开的模态
• 防止路线更改，因为对于用户而言，关闭模式已经是路线更改...

如果有一个打开的模式，我已经成功关闭，但我找不到使用类似“event.preventDefault()”之类的方法

    export class AppComponent implements OnInit, OnDestroy {
      private routerEventSubscription : Subscription;
      
      constructor (
        private router: Router,
        private modalService: NgbModal
      ) { }
    
      ngOnInit(): void {
        this.routerEventSubscription = this.router.events.pipe(
          filter( event => event instanceof NavigationStart ),
          pairwise()
        ).subscribe( event => {
          console.log(event);
          if (this.modalService.hasOpenModals()) {
            this.modalService.dismissAll();
            /***  ==> Here I want to prevent the route from changing <== ***/
          }
        })
      }
      
      ngOnDestroy () {
        this.routerEventSubscription.unsubscribe();
      }
    }

Answer 1

路由器事件不会帮助您阻止导航，因为它们只是让您知道正在发生的事情的一种手段，为了防止用户离开他们所在的当前路线，您需要使用 canDeactivate 属性路线。

你可以在这里查看官方文档：https://angular.io/api/router/CanDeactivate

你可以在网上找到这样的例子/解释：https://www.concretepage.com/angular-2/angular-candeactivate-guard-example

基本上，您创建一个实现CanDeactivate 接口的守卫，并将该守卫分配给您希望用户离开的应用程序中的所有路由，并在守卫本身中实现您需要的逻辑（您获得当前组件和可以使用它来实现您的逻辑，或者您甚至可以忽略它并使用一些共享服务或您想要的任何东西）。