CanDeactivate Guard не скрывает URL-адрес в окне браузера при отмене навигации

Я использую свойство skipLocationChange со значением true, поэтому я могу скрыть URL-адрес в браузере. Он работает нормально. Но для одной из моих функций я использую защиту CanDeactivate, поэтому я могу предупредить пользователя о сохранении изменений перед тем, как покинуть текущую страницу. Я просто показываю одно всплывающее окно, чтобы получить подтверждение от пользователя. Если пользователь нажимает «ОК», то он переходит на целевую страницу без каких-либо проблем, а URL-адрес также скрыт в браузере. Но если пользователь нажимает кнопку «Отмена», он остается на той же странице, но проблема заключается в том, что URL-адрес текущей страницы добавляется к базовому URL-адресу в браузере. Чего я не хочу. Я просто хочу, чтобы URL-адрес был скрыт и в случае отмены.

Я также прилагаю ссылку на пример проекта, созданного с помощью stackblitz: https://stackblitz.com/edit/angular-ivy-uqq8sg?file=src/app/app.component.html

Шаги для создания проблемы в примере проекта:

  1. Откройте страницу сведений о пользователе, щелкнув ссылку сведений о пользователе.
  2. Заполните форму сведений о пользователе и нажмите ссылку на первую страницу, затем появится окно подтверждения, нажмите «Отмена».
  3. Пользователь останется на той же странице, но он также добавит URL-адрес сведений о пользователе в браузере.

Примечание. Этот вопрос Защита маршрутизатора пропускает изменение местоположения не дает ответа на мой вопрос, потому что используется защита canActivate, а не защита canDeactivate. В canActivate guard мы используем метод router.navigateByURL, где мы можем установить для skipLocationChange значение true, но в canDeactivate guard для отмены навигации мы не используем метод router.navigateByURL.

Заранее спасибо.

почему вы установили skipLocationChange в маршрутизации?

Vimal Patel 19.11.2022 15:31

Отвечает ли это на ваш вопрос? Router guard пропускает смену местоположения

Vimal Patel 19.11.2022 15:38

@VimalPatel Вы имеете в виду страницу app.component.html? Это потому, что я хочу скрыть URL.

Aakash Giri 19.11.2022 15:39

если вы хотите скрыть URL, то почему вы используете маршрутизацию?

Vimal Patel 19.11.2022 15:41

@VimalPatel Нет, этот вопрос не отвечает на мой вопрос, потому что он использует защиту canActivate, а не защиту canDeactivate. В canActivate guard мы используем метод router.navigateByURL, где мы можем установить для skipLocationChange значение true, но в canDeactivate guard для отмены навигации мы не используем метод router.navigateByURL.

Aakash Giri 19.11.2022 15:42

@VimalPatel Я использую маршрутизацию, потому что мое приложение достаточно большое, поэтому проще или эффективнее использовать маршрутизацию вместо того, чтобы контролировать все, используя условия if else или переключателя, ссылка stackblitz - это просто образец, который не является реальным приложением.

Aakash Giri 19.11.2022 15:45

понял, я предлагаю включить маршрутизацию в этом случае. Это лучший UX и намного проще

Vimal Patel 19.11.2022 15:52

@VimalPatel yes Если приложение достаточно большое и содержит более 50 страниц, я думаю, нам следует использовать маршрутизацию вместо того, чтобы контролировать все, используя условия if и else. Итак, у вас есть идеи, почему он добавляет URL-адрес в браузер в случае отмены?

Aakash Giri 19.11.2022 15:57
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
1
8
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Код взят отсюда

Что я изменил:
В компоненте возвращайте чистое значение, а не наблюдатель, поэтому в страже я могу использовать его напрямую.

return true; //return of(true)

В стороже перемещайтесь по службе маршрутизатора, а не просто возвращайте false/true

this.router.navigate([state.url], { skipLocationChange: true });

Форкованный стекблиц

Другие вопросы по теме