Angular Router (Routing) - Отмена навигации по другому маршруту (URL)

Question

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

Пользователь может выбрать ответ «нет», который приложение должно остановить навигацию в этом случае.Если пользователь выбирает ответ «да», навигация должна продолжаться.

У меня вопрос, как я могу это сделать?

Следует примеру:

export class ListConfigurationsComponent implements OnInit, OnDestroy {
   ...
   constructor(
        ...
        private router: Router) {

        router.events.subscribe((val) => {
            //Cancel the option here
        });
   }
}

Answer 1

попробуйте это с помощью свойства restoreState , оно определяется, когда навигация запускается событием popstate , в противном случае оно равно null, отметьте this

router.events.pipe(
  filter(( event: NavigationEvent ) => {
        return( event instanceof NavigationStart );
       })
).subscribe((event: NavigationStart) => {
   if (event.restoredState ) {
      // display you confirmation modal
    }
})

Answer 2

Лучшим подходом было бы проверить свойство navigationTrigger на NavigationEvent и проверить предыдущий идентификатор состояния в свойстве restoredState как

if(event instanceof NavigationStart && event.navigationTrigger == "popstate" && event.restoredState)

Stackblitz на https://stackblitz.com/edit/angular-check-navigation-back-fron-through-browser

Answer 3

Одной из версий может быть то, что вы не используете [routerLink] в своем шаблоне.Вместо этого используйте обработчик (click) для вызова вашей функции, которая проверяет, должен ли пользователь быть перенаправлен.

В вашем html

(click) = "checkDialog()";

Если это так, в вашем ts просто используйте

this.router.navigate(['/next-page']);

в вашем состоянии

Answer 4

Вы ищете CanDeactivate Guard.Проверьте эту статью, она описывает, как сделать общую стратегию CanDeactivate: https://medium.com/@tobias.ljungstrom/how-to-use-a-custom-dialogue-with-the-candeactivate-route-guard-in-angular-385616470b6a