कोणीय 2 राउटर घटना पहली बार गोलीबारी नहीं कर रही है?

Question

मैं एक घटक से दूसरे घटक में रूटिंग कर रहा हूं। एक बार मार्ग पूरा हो जाने के बाद मैं पिछले मार्ग से यूआरएल का उपयोग करना चाहता हूं। मैंने नीचे दिए गए कोड को घटक के कन्स्ट्रक्टर में रखा है, लेकिन यह पहले मार्ग पर आग नहीं लगाता है। पहले मार्ग के बाद, समारोह हर बार आग लग जाता है।

this.router.events 
     .filter(e => e instanceof NavigationEnd) 
     .pairwise().subscribe((e) => { 
      console.log(e); 
    }); 

यदि मैं जोड़ीदार कार्य को हटा देता हूं तो यह पहले मार्ग पर आग लग रहा है, हालांकि यह केवल वर्तमान मार्ग सूचीबद्ध करता है, न कि पिछले मार्ग पर।

router.events 
    .filter(e => e instanceof NavigationEnd) 
    .subscribe(e => { 
    console.log(e); 
}); 

मेरा लक्ष्य पिछले घटक को पुनर्प्राप्त करना है जब नया घटक रूट किया जाता है। मुझसे यहां क्या गलत हो रहा है?

Answer 1

मैं बस एक ही समस्या पर ठोकर खा गया और इसके लिए कारण मिला: राउटर घटनाओं की सदस्यता लेने वाली सेवा को निर्भरता इंजेक्टर द्वारा कभी भी कम नहीं किया गया था, क्योंकि सेवा उस मार्ग पर इंजेक्शन नहीं थी।

एक सेवा केवल इंजेक्शन होने पर ही प्रत्याशित होती है।

तो यदि आपका पूरा कोड (ईवेंट नहीं) कभी कहा जाता है तो अपना पहला मार्ग देखें।

Answer 2

मेरे पास बिल्कुल वही परिदृश्य था और मुझे पता चला कि it's too late नेविगेशन एंड के लिए सदस्यता लेने के लिए बाल घटक के निर्माता में जोड़ी के साथ।

आप निम्न उदाहरण की तरह एक सेवा के माध्यम से अपना रूट घटक में रूटर की सदस्यता सकता है और मार्ग डेटा साझा:

events.service.ts

import { Injectable } from '@angular/core'; 
import { RouteChanged } from '../models/route-changed.model'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class EventsService { 
    public routeChanged = new BehaviorSubject<RouteChanged>({ prevRoute: '/', currentRoute: '/' }); 

    constructor() { 
    } 
} 

app.component.ts (आपका जड़ घटक)

... 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, OnDestroy { 
    private subscriptions = new Subscription(); 

    constructor(private eventsService: EventsService) { 
      this.subscriptions.add(this.router.events 
       .filter(event => event instanceof NavigationEnd) 
       .pairwise() 
       .subscribe(navigationEvents => { 
        const prevPage = <NavigationEnd>navigationEvents[0]; 
        const currentPage = <NavigationEnd>navigationEvents[1]; 
        this.eventsService.routeChanged.next(
         { prevRoute: prevPage.urlAfterRedirects, currentRoute: currentPage.urlAfterRedirects }); 
       })); 
     } 

    ngOnDestroy(): void { 
     this.subscriptions.unsubscribe(); 
    } 

    ... 
} 

अपने लक्ष्य-route.ts

... 
constructor(private eventsService: EventsService) { 
    this.subscriptions.add(this.eventsService.routeChanged.subscribe((routeChanged) => { 
     // use routeChanged.prevRoute and routeChanged.currentRoute here... 
    })); 
} 

पीएस यदि आपका बच्चा घटक पृष्ठ लोड के बाद सदस्यता लेता है तो उचित पिछले मार्ग ईवेंट प्राप्त करने के लिए सेवा में BehaviorSubject या ReplaySubject का उपयोग करना महत्वपूर्ण है।

Answer 3

उत्तर पहले ही दिया गया था: जब घटक इसके लिए पंजीकृत होता है तो NavigationEnd ईवेंट पहले ही उठाया जा चुका है। मुझे किसी विषय के माध्यम से उन घटनाओं को प्रॉक्सी करके एक कामकाज बनाने के लिए "डिमिटार टैचेव" के विचार को पसंद नहीं है।

1. घटक से पहले के रूप में NavigationEnd घटना से सदस्यता लेने दें: मेरे मामले के समाधान में किया गया था।
2. घटक को ngOnInit विधि में इंजेक्शन रूट ऑब्जेक्ट से प्रारंभिक स्थिति लोड करें।

और आखिर में एक और समाधान मार्ग परिवर्तन घटनाओं को घटक के निर्माता में सदस्यता ले जाना है।