Angular 2 canDeactivate ist nicht immer Routing

Question

Ich habe eine Komponente mit einer Schaltfläche Abbrechen. Wenn diese getroffen wird, die gotoParent() wird aufgerufen:

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(); 
} 

Weil ich einen Deaktivierungsschutz für die Strecke realisiert habe ich (in der Regel) einen Dialog:

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

Mein Problem ist, dass diese Werke Einmal. Wenn ich die Komponente Abbrechen ein zweites Mal klicke, bekomme ich keine Antwort - kein Dialog. Auch die Schaltfläche Speichern der Komponente funktioniert nicht.

Wenn ich meinen Code verfolgen sehe ich die router.navigate() ausgeführt wird - die console.info() ist da, also kann ich einen Haltepunkt setzen - aber das Dialogfeld erscheint nicht und die Anwendung nicht navigieren.

An dieser Stelle kann ich auf einige "Master" klicken, um zum Stamm der Anwendung zu gehen. Dann bekomme ich diesen Dialog erneut. Wenn ich auf den Dialog Abbrechen für diese Instanz des Dialogs klicke, dann hört auch das auf zu arbeiten.

Was sollte passieren, ist der Dialog Abbrechen sollte mich in der aktuellen Komponente anzeigen lassen, bereit, den Dialog wieder anzuzeigen.

Dies funktionierte im ursprünglichen Tutorial, aber nicht nachdem ich die Dinge für meine eigenen Zwecke geändert habe. Hat jemand eine Ahnung für mich?

Danke, Jerome.

EDIT: Beantworten YairTawil erfordert mehr Platz, als ein Kommentar liefern könnte.

Hier sind meine Ereignisse, nachdem ich den Listener für Ereignisse eingefügt.

Navigieren aus dem globalen Menü in edit-org:

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

Klicken Sie auf Komponente Abbrechen:

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} 

(Die id = 12 ein Tutorial Trick ist, die Eltern zu erzählen, die ID gearbeitet wurde . auf)

Klicken Sie auf Dialog abbrechen:

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

Zurück zur Komponente.

Klicken Sie erneut auf die Komponente Abbrechen. Kein Event. Klicken Sie auf die Komponente Speichern. Kein Event.

Durch Klicken auf eine globale Menüwahl „Provider“ liefert diese Ereignisse:

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

Nach dem Einschalten Dialog klicken Abbrechen der globale Menü-Provider nicht mehr funktioniert. Es ist, als ob etwas gelöscht oder zurückgesetzt werden möchte.

I kann zuverlässig jedes Mal das Ereignis auslösen, indem Sie abwechselnd auf die Komponente Abbrechen, Dialog Abbrechen klicken, dann das globale Menü Provider, dann den Dialog Abbrechen, dann wiederholen. Aber aufeinanderfolgende Klicks auf die Sammlung von Komponentenschaltflächen, wie z. B. (Komponente Abbrechen, Dialogfeld Abbrechen, dann Komponente Abbrechen), führen nicht zu diesem zweiten Dialog.

Weitere Ideen?

Hieronymus.

Answer 1

Ich habe eine Menge Debugging, progressiv gestrippt Versionen meines Programms zu vergleichen und die Winkel 2 "Routing" Tutorial (von Plunker). Nach einer Weile wurde mir klar, dass der Code zwischen den beiden identisch war, aber ich erhielt unterschiedliche Ergebnisse. Die Antwort wird nicht im App-Verzeichnis sein.

Ich habe zu index.html (meine Gulp-Datei kopiert index-jit.html in dort) und festgestellt, dass einige enthaltene Javascript mein Ergebnis beeinflusst. Ich verstehe nicht, warum das der "Fix" ist, aber das Ändern einiger Javascript Include-Dateien funktioniert für mich.

enthalten Meine index.html diese Dateien und rief einen Import:

<!-- 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> 

Die Angular 2 Tutorial von Plunker diese Zeilen hat statt:

<!-- 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> 

Wenn ich die Ersetzungen mein Programm machen, ist jetzt Arbeiten wie erwartet. Jeder Klick auf die Schaltfläche Abbrechen gibt mir einen Dialog, und der Dialog Abbrechen bringt mich zur Komponente zurück.

Dank alle für das Hören in.

Jerome.

Answer 2

Es gibt FAW Arten von Ereignissen, die angular2 Router senden, wenn es navigate starten:

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

wenn CanDeactivate get 'false' navigationCancel Ereignis sollte senden.

können Sie Router Ereignisse folgen:

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 
    } 
    } 

}