Маршрутизаторы в Ангуляр 8 - PullRequest
Новая
       65

Маршрутизаторы в Ангуляр 8

0 голосов
/ 01 ноября 2019

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

Я думаю использовать canDeactivate, чтобы запретить доступ к предыдущей странице и Angular Location, чтобы определить, какие пользователи страницы находятся на этом этапе. перезагрузите эту страницу. Но я не знаю, как это реализовать.

1 Ответ

2 голосов
/ 01 ноября 2019

1. Создание службы для CanDeactivate Guard

Сначала необходимо создать интерфейс, который будет объявлять метод canDeactivate, и с помощью этого интерфейса вы создадите службу, которая будет действовать как canDeactivate guard. Этот сервис определит метод canDeactivate следующим образом:

deactivate.guard.ts: 

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

export interface CanComponentDeactivate {
  canDeactivate(): boolean;
}

@Injectable()
export class DeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): boolean {

    /*
    The return value would be true, unless the canActivate function, 
    defined on the component returns false,
    in which case the function will open a Dialog Box,
    to ask if we want to stay on the page or leave the page.
    */
    if (component.canDeactivate()) return true;
    else return confirm('You have unsaved changes!') ? true : false;

  }
}

Интерфейс объявил метод canDeactivate, тип возвращаемого значения - логический. В сервисном коде мы вызвали метод canDeactivate, используя экземпляр компонента.

2. Настройка службы CanDeactivate Guard в модуле маршрутизации приложений

app.module.ts: 

import { CanDeactivateGuard } from './can-deactivate-guard.service';

------
@NgModule({
  ------
  providers: [ 
    CanDeactivateGuard
  ]
})
export class AppRoutingModule { }

3. Создайте метод canDeactivate () в своем компоненте

formComponent.ts: 

import { Component, HostListener } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { CanComponentDeactivate } from 'src/app/deactivate.guard';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements CanComponentDeactivate {
  saved: boolean;
  form: FormGroup;
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['']
    });
  }

  /* Prevent page reloading */
  @HostListener('window:beforeunload', ['$event'])
  canReload(e) {
    if (!this.canDeactivate()) e.returnValue = true;
  }

  submit = () => this.saved = true;
  canDeactivate = () => this.saved || !this.form.dirty;
}

4. Добавление CanDeactivate Guard к маршруту компонента в модуле маршрутизации

Вам необходимо добавить наш CanDeactivate guard .ie DeactivateGuard к маршруту компонента в модуле маршрутизации с использованием атрибута canDeactivate.

app-routing.module.ts: 

const routes: Routes = [
  {
    path: 'home',
    component: FormComponent,
    canDeactivate: [DeactivateGuard]
  },
  { path: 'next', component: NextComponent },

  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

...