Comment valider le routage et le rompre lorsqu'il n'est pas nécessaire dans angular2

Question

Je dois ajouter une validation sur le routage. Lorsque l'utilisateur essaie de rediriger d'une page à l'autre, je dois vérifier s'il y a des modifications non enregistrées ou non. Si oui alors montre modal pour confirmer la redirection sinon l'utilisateur restera sur la même page.

J'ai essayé de travailler avec peutActiver mais il s'est déclenché uniquement lorsque l'utilisateur charge l'application pas sur le routage interne.

Je suis à la recherche d'une solution centralisée car le routage peut se faire depuis le contrôleur, la vue ou href. Pour ce faire, je me suis abonné au router.events où je suis capable d'attraper tous les événements de routage. Maintenant, je veux juste un moyen de bloquer le routage et montrer le modal et aussi garder la trace ou le dernier routage de sorte que si l'utilisateur clique sur OK, je peux continuer le routage.

Si c'est un événement NavigationStart alors je dois rompre le routage en fonction des conditions.

S'il vous plaît suggérer est-il un moyen de le faire.

Je dois vérifier chaque routage qui s'est passé dans l'application.

Answer 1

Vous devez mettre toutes les routes sous un garde et toutes les routes seraient des sous-routes de la garde.

et également d'utiliser canDeactivate pour vérifier si les données sont enregistrées ou non.

{ path: 'guard', component: GuardsComponent , canDeactivate:[CanDeactivateGuard]}, 

peut désactiver

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

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

@Injectable() 
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> { 

    canDeactivate(component: CanComponentDeactivate) { 
    return component.canDeactivate ? component.canDeactivate() : true; 
    } 

}