Блог

Главная - Вопросы по программированию - Angular: как предотвратить событие маршрутизатора по умолчанию

Angular: как предотвратить событие маршрутизатора по умолчанию

#angular #router #preventdefault

#angular #маршрутизатор #preventdefault

Вопрос:

В моем компоненте приложения я проверяю, есть ли какие-либо открытые модальности при изменении маршрута. В этом случае я хочу

  • закройте открытые модальности
  • запретить изменение маршрута, потому что для пользователя закрытие модального уже является изменением маршрута…

Мне удалось закрыть модалы, если один открыт, но я не могу найти способ использовать что-то вроде ‘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();
      }
    }

Ответ №1:

События маршрутизатора не помогут вам предотвратить навигацию, поскольку они просто позволяют вам узнать, что происходит, для предотвращения выхода пользователя из текущего маршрута, в котором он находится, вам необходимо использовать canDeactivate свойство routes .

Вы можете ознакомиться с официальной документацией здесь: https://angular.io/api/router/CanDeactivate

И вы можете найти примеры / объяснения в Интернете, подобные этому: https://www.concretepage.com/angular-2/angular-candeactivate-guard-example

По сути, вы создаете защиту, которая реализует CanDeactivate интерфейс, и назначаете эту защиту всем маршрутам в вашем приложении, которые вы хотите, чтобы пользователь оставил, и реализуете необходимую логику в самой защите (вы получаете текущий компонент и можете использовать его для реализации своей логики, или вы даже можете игнорировать его и использоватькакая-нибудь общая служба или все, что вы хотите).

Комментарии:

1. Это действительно вариант. Но я надеялся, что есть более общее решение, которое применяется ко всем маршрутам без необходимости добавлять защиту к каждому маршруту…

2. Да, я понимаю. Но я думаю, вам нужно настроить маршруты, чтобы сообщить Angular, как себя вести, и я не думаю, что это можно сделать на уровне модуля, поскольку вы обычно не хотите реализовывать то же самое для всех маршрутизаторов, я думаю. В любом случае я этого не пробовал, но я бы предположил, что CanDeactivate применение к маршруту также применяется ко всем его дочерним элементам, поэтому, если вы поместите все свои маршруты в качестве дочерних элементов приложения, вы можете установить canDeactivate только этот параметр. Я думаю, что это сработало бы, но я не могу быть уверен на 100%, поскольку я не пробовал, может быть, стоит попробовать, если хотите 🙂