Угловая 2 canDeactivate не всегда маршрутизирует

Question

У меня есть компонент с кнопкой «Отмена». Когда это будет хит gotoParent() вызывается:

canDeactivate(): Promise<boolean> | boolean { 
    return this.dialogService.confirm('Discard changes?'); 
} 

private gotoParent() { 
    let orgId = this.org ? this.org.id : -1; 
    this.router.navigate(['../', { id: orgId }], { relativeTo: this.route }); 
    console.info("orgId: " + orgId); 
} 

cancel() { 
    this.gotoParent(); 
} 

Поскольку я деактивация охранник реализованный для маршрута I (обычно) появится диалоговое окно:

@Injectable() 
export class DialogService { 
    confirm(message?: string) { 
    return new Promise<boolean>(resolve => { 
     return resolve(window.confirm(message || 'Is it OK?')); 
    }); 
    }; 
} 

Моя проблема заключается в том, что это работает один раз. Если я щелкнув компонент Отменить второй раз, я не получаю ответа - нет диалога. Ни кнопка сохранения компонента не работает.

Когда я отслеживаю свой код, я вижу, что выполняется router.navigate() - здесь есть console.info(), поэтому я могу установить точку останова, но диалог не отображается, и приложение не работает навигации.

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

Что должно произойти, это диалоговое окно «Отмена» должно оставить меня на текущем дисплее компонента, готового снова отобразить диалоговое окно.

Это работало в оригинальном учебном пособии, но не после того, как я изменил ситуацию в своих целях. Кто-нибудь знает меня?

Спасибо, Jerome.

EDIT: Ответ на YairTawil требует больше места, чем может предоставить комментарий.

Вот мои события после того, как я вставил прослушиватель для событий.

Navigate из глобального меню в Edit-ORG:

event = NavigationEnd {id: 4, url: "/provider/edit-org", urlAfterRedirects: "/provider/edit-org"} 

Нажмите на компонент Отменить:

event = NavigationStart {id: 5, url: "/provider;id=12"} 
org-detail.component.ts:67 event = RoutesRecognized {id: 5, url: "/provider;id=12", urlAfterRedirects: "/provider;id=12", state: RouterStateSnapshot} 

(Ид = 12 представляет собой учебник трюк, чтобы сказать родителю, который работал ID . на)

Нажмите в диалоговом окне Отмена:

org-detail.component.ts:67 event = NavigationCancel {id: 5, url: "/provider;id=12", reason: ""} 

Назад к компоненту.

Нажмите еще раз на компонент Отменить. Никакого события. Нажмите «Сохранить». Никакого события.

Нажатие на глобальный выбор меню «Поставщик» дает следующие события:

event = RoutesRecognized {id: 6, url: "/provider", urlAfterRedirects: "/provider", state: RouterStateSnapshot} 
org-detail.component.ts:67 event = NavigationCancel {id: 6, url: "/provider", reason: ""} 

После нажатия кнопки в диалоговом окне Отмена глобального меню Provider больше не работает. Как будто что-то хочет очистить или сбросить.

I может надежно активировать событие каждый раз, нажимая поочередно по компоненту Отмена, диалог Отмена, затем кнопка поставщика глобального меню, затем диалоговое окно Отмена, затем повторите. Но последовательные клики по набору кнопок компонентов, такие как (компонент Отмена, диалог Отмена, затем компонент Отмена), не дают этого второго диалогового окна.

Больше идей?

Jerome.

Answer 1

Я сделал много отладки, сравнивая постепенно раздела версию моей программы и угловой 2 «Маршрутизация» учебник (от Plunker). Через некоторое время я понял, что код между ними идентичен, но я получаю разные результаты. Ответ не будет в каталоге приложения.

Я получил index.html (мой файл Gulp копирует index-jit.html туда) и обнаружил, что некоторые включенные Javascript влияют на мой результат. Я не понимаю, почему это «исправление», но меняют некоторые файлы с поддержкой Javascript.

Мой index.html включил эти файлы и называется импорт:

<!-- IE required polyfills, in this exact order --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script> 
    System.import('system-config.js') 
    .then(function() { System.import('main'); }) 
    .catch(function(err){ console.error(err); }); 
</script> 

Угловые 2 учебника от Plunker имеет следующие строки вместо:

<!-- IE required polyfills, in this exact order --> 
<script src="https://unpkg.com/core-js/client/shim.min.js"></script> 

<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script> 
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script> 
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script> 

<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script> 

<script> 
    System.import('app') 
     .catch(function(err){ console.error(err); }); 
</script> 

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

благодарит все за прослушивание.

Jerome.

Answer 2

Существует типа FAW событий, которые angular2 маршрутизатор отправить, когда он начать Navigate:

• navigationStart
• navigationError,
• navigationCancel,
• navigationEnd ....

когда CanDeactivate получает «false» navigationCancel событие должно отправить.

Вы можете следить за маршрутизатор события:

import {Router} from "@angular/router"; 
    export class MyClass{ 
    constructor(private router:Router) { 
    this.router.events.subscribe(event => { 
     console.log("event = ",event) 
     ... search what happend with your navigation 
    } 
    } 

}