Зачем нам вообще нужна служба защиты маршрута CanDeactivate?
Предположим, что вы заполняете форму отправки, и после заполнения формы вы случайно нажали на другую ссылку навигации. Вы будете перенаправлены на случайно нажатую ссылку или страницу, и все изменения, внесенные в форму, будут отменены. Итак, в этом случае, если вы хотите показать пользователю подтверждение или предупреждение, прежде чем он перейдет по другой ссылке, вам нужно использовать Angular CanDeactivate route guard.
ПОЛУЧИТЕ ССЫЛКУ GITHUB В КОНЦЕ.
Реализация защиты маршрута CanDeactivate включает простые шаги.
Я уже создал простое приложение Angular 9, с помощью которого я собираюсь показать вам, как реализовать защиту маршрута. Вы можете клонировать мой репозиторий GitHub для справки.
Шаг 1. СОЗДАЙТЕ СЛУЖБУ CANDEACTIVATE ROUTE GUARD: Создайте класс обслуживания с помощью команды «ng g s route-guard-service». Не стесняйтесь давать любое имя своему классу обслуживания. Теперь импортируйте интерфейс CanDeactivate из @ angular / router. Реализуйте интерфейс с помощью компонента общего типа, в котором вы хотите использовать защиту маршрута. Интерфейс CanDeactivate содержит один метод canDeactivate (), который необходимо переопределить. Передайте компонент типа generic component в качестве параметра, чтобы мы могли получить доступ к свойствам компонента.
Шаг 2. РЕГИСТРАЦИЯ СЛУЖБЫ ROUTE GUARD В МОДУЛЕ ПРИЛОЖЕНИЯ. Нам необходимо импортировать службу, созданную в файле app.module.ts. Зарегистрируйте созданный сервис в массиве провайдеров, чтобы мы могли использовать его во всем приложении.
Шаг 3. ИСПОЛЬЗУЙТЕ ШАБЛОН-ССЫЛКУ ФОРМЫ: Чтобы использовать ссылочную переменную шаблона в файле component.ts, мы используем декоратор «ViewChild».
Здесь мы передаем ссылку на шаблон в качестве параметра для декоратора ViewChild, и мы будем использовать его в EventListingCanDeactivateGuardService с именем eventListingForm типа NgForm, чтобы проверить, является ли форма грязной или нет.
Шаг 4. НАСТРОЙКА МАРШРУТИЗАЦИИ ПРИЛОЖЕНИЯ. Мы должны предоставить службу защиты маршрута в качестве параметра для свойства canDeactivate. И, наконец, запустите приложение с «ng serve -o».
КОНЕЧНЫЙ РЕЗУЛЬТАТ. Как вы можете видеть ниже, когда вы пытаетесь перейти от «Событие» к «Таблице», не отправляя форму, появляется окно с предупреждением. .
ЗАКЛЮЧЕНИЕ. Мы успешно создали приложение для реализации службы защиты маршрута CanDeactivate, чтобы пользователь не мог внезапно перейти на другую страницу.
