Angular 5 предотвращает или предупреждает пользователя перед нажатием кнопки возврата

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

Я пытался сделать это в своем index.html

<script>
    window.onbeforeunload = function() {
       return "Message";
    };
</script>

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

как лучше всего в 2018 году справиться с этой ситуацией ??

Спасибо

Взгляните на canDeactivate()

Rusty 10.09.2018 03:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
5 268
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы можете разрешить / запретить навигацию по маршруту с помощью средства защиты маршрута canActivate, и вы можете разрешить / запретить переход от маршрута с помощью средства защиты маршрута canDeactivate (см. документация по Angular).

Если вы хотите запретить пользователю вернуться на страницу, которая уже была посещена, используйте защиту маршрута canActivate. В этот stackblitz перед возвратом на страницу Login запрашивается подтверждение. В качестве бонуса он также содержит пример защиты маршрута canDeactivate для маршрута Home.

Вот код для защиты маршрута canActivate маршрута Login:

активировать-guard.ts

import { Injectable } from "@angular/core";
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";
import { LoginActivateService } from "./login-activate.service";

@Injectable()
export class ActivateGuard implements CanActivate {

  constructor(private loginActivate: LoginActivateService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.loginActivate.canActivateLogin || confirm("Do you really want to go back to login?");
  }

}

app-routing.module.ts

...
imports: [
  RouterModule.forRoot([
    {
      path: 'login', component: LoginViewComponent,
      canActivate: [ActivateGuard]
    },
    {
      path: 'home',
      component: HomeViewComponent,
      canDeactivate: [DeactivateGuard]
    },
    ...
  ])
],

будет ли этот триггер для каждого события выгрузки или только кнопка возврата ??

Smokey Dawson 10.09.2018 02:38

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

ConnorsFan 10.09.2018 02:39

Да, я бы действительно хотел отображать сообщение только в том случае, если пользователь нажимает кнопку "Назад" и не пытается покинуть приложение.

Smokey Dawson 10.09.2018 02:42

Вы имеете в виду, что хотите отображать сообщение, когда пользователь нажимает кнопку «Назад» для навигации по приложению? Этот ответ неприменим к этому случаю (как и образец кода в вопросе).

ConnorsFan 10.09.2018 02:45

Я имею в виду кнопку назад в браузере

Smokey Dawson 10.09.2018 02:45

Да, но эта кнопка может заставить браузер покинуть приложение или перейти к предыдущему маршруту в приложении. Какой из них применим к вашему случаю?

ConnorsFan 10.09.2018 02:47

Я просто хочу запретить людям использовать кнопку "Назад" для перехода на предыдущие страницы в моем приложении.

Smokey Dawson 10.09.2018 02:50

Может ли пользователь с этой страницы переходить к другим страницам приложения другими способами, кроме кнопки «Назад»?

ConnorsFan 10.09.2018 02:59

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

Smokey Dawson 10.09.2018 03:00

Извините, еще один вопрос. Пользователю будет разрешено переходить на другие страницы, но вы хотите предотвратить (или предупредить) его от перехода на одну конкретную страницу. Это верно?

ConnorsFan 10.09.2018 03:03

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

Smokey Dawson 10.09.2018 03:04

Вы можете использовать охранники маршрута, чтобы предотвратить переход с маршрута (canDeactivate) или на маршрут (canActivate), но я не думаю, что они могут отличить использование кнопки возврата от других средств навигации. Если после выхода со страницы вы не хотите, чтобы пользователь возвращался на эту страницу (с кнопкой «Назад» или без нее), это можно сделать с помощью средства защиты маршрута canActivate.

ConnorsFan 10.09.2018 03:17

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

ConnorsFan 10.09.2018 03:59

вы можете подписаться на свойство событий маршрутизатора (доступно в Angular 8>) он будет запускать действие на каждой фазе маршрутизации, например, в начале, конце навигации, событии onPopstate, ... и, следовательно, событии кнопки возврата браузера.

import { Router } from '@angular/router';

constructor(private router: Router) {
   this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
      // write the logic here
    }
   });
}

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