angular2: CanDeactivate गार्ड

Question

मैं एक CanDeactivate गार्ड जो एक नमूदार रिटर्न बना लिया है और यह एक घटक है जो एक आंतरिक नेस्टेड रूटर-आउटलेट में लोड किया जाता है के लिए आवेदन किया है। जब भी कोई अन्य यूआरएल पर नेविगेट करने का प्रयास करता है तो क्या इस गार्ड को बुलाया जाना चाहिए? मैं यह पूछ रहा हूं क्योंकि यह मेरे मामले में नहीं हो रहा है।

मेरे मामले में, गार्ड सिर्फ पहला "अलग" URL के लिए कहा जाता हो जाएगा। मुझे इसे एक उदाहरण के साथ समझाने की कोशिश करें। मान लें कि मैं हमेशा झूठे लौट रहा हूँ और मैं एक ही घटक से अलग यूआरएल के लिए नेविगेट करने की कोशिश कर रहा हूँ:

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

इस अपेक्षित व्यवहार है?

संपादित ठीक है, ऐसा लगता है यह है की तरह। अभी 3 घटकों के साथ एक छोटा नमूना बनाया है और गार्ड को केवल पहली बार बुलाया जाएगा जब उपयोगकर्ता किसी विशिष्ट यूआरएल पर नेविगेट करने की कोशिश करता है ... यह वास्तव में अजीब है ...

वैसे भी, यहां कोड I ' मीटर का उपयोग कर:

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

सब कुछ कोणीय CLI (पूर्व .: एनजी घटक XXX) के माध्यम से उत्पन्न किया गया था। हाँ, CanDeactivate गार्ड हमेशा अवास्तविक लौटाते तो आप मुख्य घटक अनलोड करने के लिए सक्षम नहीं होगा होगा। तो, पहली बार जब मैं दूसरे क्लिक करता हूं, गार्ड को बुलाया जाता है। यदि दूसरे पर फिर से क्लिक करें, तो कोई गार्ड नहीं बुलाया जाता है। हालांकि, अगर मैं दूसरे 3 पर क्लिक करता हूं, तो गार्ड को बुलाया जाता है। other3 से अधिक क्लिक करने से वास्तव में कुछ नहीं करेंगे जब तक मैं अन्य लिंक (पूर्व .: अन्य) पर क्लिक किया है ...

इस अपेक्षित व्यवहार है? मुझे यह कहना होगा कि मुझे उम्मीद है कि हर बार जब मैं एक और लिंक हिट करता हूं तो मेरे गार्ड को हिट करने की उम्मीद है ...

धन्यवाद।

लुइस

Answer 1

अरे, बग ... आत्म करने के लिए नोट: अगली बार, बोर्ड पहले

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

Answer 2

समस्याओं को भी जांच के लिए इस समाधान मैं पाया है, बजाय के हर के लिए एक candeactivate गार्ड बनाने घटक, आप एक गार्ड सेवा बनाएंगे और प्रत्येक घटक को एक कैंडीएक्टिवेट विधि जोड़ देंगे जिसे आप इस विकल्प को जोड़ना चाहते हैं, इसलिए सबसे पहले आपको यह सेवा फ़ाइल "निष्क्रिय करें-guard.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; 
    } 
} 

तो आप अनुप्रयोग मॉड्यूल में प्रदान करने के लिए: घटक आप की रक्षा करना चाहते हैं में अब

providers: [ 
    DeactivateGuardService 
    ] 

, समारोह जोड़ें:

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

आप देख सकते हैं कि चर लोड हो रहा है करने के लिए स्थानीय है घटक। मैं आशा है कि यह मददगार थे, गुडलक

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

और यह thats,: अंतिम चरण मार्ग मॉड्यूल में घटक के निर्देश जोड़ना है।