меню

Интерфейс CanDeactivate применяется классом, который должен принимать решение, можно ли деактивировать роут. Напишем сервис реализующий интерфейс CanDeactivate:

 
import { Observable } from "rxjs/Observable";
import { 
  CanDeactivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}
 

Сервис не знает деталей реализации метода деактивации у компонента. Он только проверяет, что у компонента есть метод canDeactivate() и запускает его.

Класс реализует интерфейс CanComponentDeactivate:

  
export class EditServerComponent implements OnInit, CanComponentDeactivate {
  //...
  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.allowEdit) {
      return true;
    }

    const isSettingsChanged = this.serverName !== this.server.name 
      || this.serverStatus !== this.server.status;

    if (isSettingsChanged 
      && !this.changesSaved) {
      return confirm('Do you want discard the changes?'); 
    } else {
      return true;
    }
  }
}
 

Routes должен содержать ключ canDeactivate с именем сервиса:

 
{
 //...
 children: [
   //...,
    {
     path: ':id/edit', 
      component: EditServerComponent,
     canDeactivate: [CanDeactivateGuard]
   },
  ]
}
  

Сервис нужно зарегистрировать в провайдерах модуля.


Возможно, вам будет интересно

Навигация. Передача данных событиями

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

Компонент и модель

Angilar создание обычных и вложенных компонентов через CLI. Описание модели.

Route. Вынос настроек роутера

Пример переноса роутинговой конфигурации Angular5 в отдельный файл

Route. Контроль навигации с помощью сервиса

Деактивации роута в Angular5 и контроль навигации

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту