angular2: CanDeactivate garde

J'ai créé un CanDeactivate garde qui retourne un observables et elle est appliquée à un composant qui est chargé dans un intérieur imbriquée routeur de sortie. Si ce dispositif doit être appelé à chaque fois qu'on essaie de naviguer vers une autre url? Je vous pose cette question parce que ce n'est pas le cas dans mon cas.

Dans mon cas, la garde seule appelée pour la première de "différent" de l'URL. Permettez-moi d'essayer de l'expliquer avec un exemple. Supposons que je suis toujours en renvoyant false et je suis en train de parcourir les différents urls de la même composant:

/A --> guard called
/B --> guard called
/B --> no navigation and no guard called
/A --> guard called
/A -->guard not called and no navigation

Est-ce le comportement attendu?

modifier Bien, il semble que comme il est. Vient de construire un petit échantillon avec 3 composants et de la garde d'être appelé pour la 1ère fois que l'utilisateur tente d'accéder à une url spécifique...c'est vraiment bizarre...

De toute façon, voici le code que j'utilise:

//app.routing
import {NgModule} from "@angular/core";
import {Routes, RouterModule, Route, CanDeactivate, ActivatedRouteSnapshot, 
        RouterStateSnapshot} from "@angular/router";
import { MainComponent } from "./main/main.component";
import { OtherComponent } from "./other/other.component";
import { Other3Component } from "./other3/other3.component";
import {Observable} from "rxjs/observable";
const fallback: Route = {
    path: "**",
    redirectTo: "/main",
    pathMatch: "full"
};
export class Test implements CanDeactivate<MainComponent>{
  canDeactivate(component: MainComponent, route: ActivatedRouteSnapshot, 
            state: RouterStateSnapshot): Observable<boolean> | boolean{
    console.log("in");
    return false;
  }
}
export const rotas: Routes = [
{
    path: "main",
    component: MainComponent,
    canDeactivate: [Test]
},
{
    path: "other",
    component: OtherComponent
},
{
    path: "other3",
    component: Other3Component
},
fallback
];

@NgModule({
 imports: [RouterModule.forRoot(rotas)],
 exports: [RouterModule]
})
export class AppRoutingModule{}

//app.component.html
<h1>
<a routerLink="/main">Main</a>
<a routerLink="/other">Other</a>
<a routerLink="/other3">Other3</a>
</h1>

Tout a été généré par angulaires-cli (ex.: n g composant XXX). Oui, le CanDeactivate garde renverra toujours false donc vous ne serez pas en mesure de décharger le composant principal. Donc, la première fois que je clique sur les autres, la garde est appelé. Si vous cliquez à nouveau sur d'autres, pas de garde est appelé. Cependant, si je clique sur autre3, la garde est appelé. En cliquant sur le autre3 ne sera pas vraiment faire quelque chose jusqu'à ce que j'ai cliqué sur le lien (ex.: d'autres)...

Est-ce le comportement attendu? Je dois dire que je l'ai attendu ma garde pour se faire frapper à chaque fois que j'ai frappé un autre lien...

Grâce.

Luis

InformationsquelleAutor Luis Abreu | 2016-12-14
  1. 23

    j'ai trouvé cette solution, au lieu de créer un candeactivate de la garde pour chaque composant, vous permettra de créer un service de garde et d'ajouter un candeactivate méthode pour chaque composant que vous souhaitez ajouter cette option, vous devez d'abord ajouter ce service fichier "désactiver-garde.service.ts":

    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 DeactivateGuardService implements  CanDeactivate<CanComponentDeactivate>{

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

    vous devez alors fournir dans l'application du module:

    providers: [
    DeactivateGuardService
  ]

    maintenant dans le composant que vous souhaitez protéger, ajoutez la fonction:

    export class ExampleComponent {
    loading: boolean = false;
    //some behaviour that change the loading value
    canDeactivate() {
        console.log('i am navigating away');
        if (this.loading) {
            console.log('no, you wont navigate anywhere');
            return false;
        }
        console.log('you are going away, goodby');
        return true;
    }
}

    vous pouvez voir que le chargement variable est locale à la composante.
    la dernière étape consiste à ajouter la directive du composant dans le module de routage:

    { 
  path: 'example', 
  canDeactivate: [DeactivateGuardService],
  component: ExampleComponent 
}

    et c'est tout, j'espère que cela vous a été utile, goodluck.

    • cela a bien fonctionné pour moi, merci!
    • Merci, très belle solution.
    • J'ai presque exactement le même code, mais lors de l'appel de la garde, c'est de se plaindre que le composant n'est pas défini. Dans mon composant, je suis de l'importation de l'interface, la classe implémente, et la méthode renvoie une valeur de type boolean. Comment le DeactivateGuardService's canDeactivate méthode d'obtenir le composant?
    • pouvez-vous donner un code, peut être que je peux aider
    InformationsquelleAutor Abdelhalim FELLAGUE CHEBRA
  2. 2

    Merde, bug...Note à moi-même: la prochaine fois, vérifiez le tableau des enjeux première

    https://github.com/angular/angular/issues/12851#event-880719778

    InformationsquelleAutor Luis Abreu