कोणीय 2: मुझे राउटर-आउटलेट

Question

के बाहर से रूट के पैरा कैसे प्राप्त होते हैं Angular2 Get router params outside of router-outlet पर इसी तरह का प्रश्न लेकिन कोणीय 2 (राउटर के संस्करण 3.0.0) के रिलीज़ संस्करण को लक्षित करना। मेरे पास संपर्कों की सूची और राउटर आउटलेट के साथ एक ऐप है जो या तो चयनित संपर्क को प्रदर्शित या संपादित करने के लिए है। मैं यह सुनिश्चित करना चाहता हूं कि उचित संपर्क किसी भी बिंदु (पेज लोड सहित) पर चुना गया है, इसलिए जब भी मार्ग बदल जाता है तो मैं मार्ग से "आईडी" परम पढ़ने में सक्षम होना चाहता हूं।

राउटर की घटनाओं की संपत्ति की सदस्यता ले कर मैं रूटिंग घटनाओं पर अपना हाथ प्राप्त कर सकता हूं, लेकिन इवेंट ऑब्जेक्ट सिर्फ मुझे कच्चे यूआरएल तक पहुंच प्रदान करता है, न कि इसका एक पार्स संस्करण। मैं राउटर की parseUrl विधि का उपयोग कर पार्स कर सकता हूं, लेकिन इसका प्रारूप विशेष रूप से सहायक नहीं है और बल्कि भंगुर होगा, इसलिए मैं इसका उपयोग नहीं करना चाहूंगा। राउटर की राउटर रूटिंग इवेंट में राउटरस्टेट संपत्ति के बावजूद मैंने सभी को भी देखा है, लेकिन स्नैपशॉट में पैरा हमेशा एक खाली वस्तु होती है।

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

Answer 1

मैं पूरे दिन इस मुद्दे के साथ संघर्ष कर रहा हूं, लेकिन मुझे लगता है कि अंततः मुझे राउटर घटना में से किसी एक को सुनकर ऐसा करने का तरीका पता चला। तैयार रहें, यह थोड़ा मुश्किल है (बदसूरत?), लेकिन आज के रूप में यह कम से कम कोणीय (4.x) और कोणीय राउटर (4.x) के नवीनतम संस्करण के साथ काम कर रहा है। यदि कोड कुछ बदलता है तो कोड का यह टुकड़ा भविष्य में काम नहीं कर रहा है।

असल में, मुझे मार्ग का मार्ग प्राप्त करने का एक तरीका मिला, और फिर मेरे द्वारा कस्टम पैरामीटर मानचित्र का पुनर्निर्माण करने का एक तरीका मिला।

तो यहाँ यह है:

import { Component, OnInit } from '@angular/core'; 
import { Router, RoutesRecognized } from '@angular/router'; 

@Component({ 
    selector: 'outside-router-outlet', 
    templateUrl: './outside-router-outlet.component.html', 
    styleUrls: ['./outside-router-outlet.component.css'] 
}) 

export class OutSideRouterOutletComponent implements OnInit { 
    path: string; 
    routeParams: any = {}; 

    constructor(private router: Router) { } 

    ngOnInit() { 
    this.router.events.subscribe(routerEvent => { 
     if (routerEvent instanceof RoutesRecognized) { 
      this.path = routerEvent.state.root['_routerState']['_root'].children[0].value['_routeConfig'].path; 
      this.buildRouteParams(routerEvent); 
     } 
    }); 
    } 

    buildRouteParams(routesRecognized: RoutesRecognized) { 
    let paramsKey = {}; 
    let splittedPath = this.path.split('/'); 
    splittedPath.forEach((value: string, idx: number, arr: Array<string>) => { 
     // Checking if the chunk is starting with ':', if yes, we suppose it's a parameter 
     if (value.indexOf(':') === 0) { 
     // Attributing each parameters at the index where they were found in the path 
     paramsKey[idx] = value; 
     } 
    }); 
    this.routeParams = {}; 
    let splittedUrl = routesRecognized.url.split('/'); 
    /** 
    * Removing empty chunks from the url, 
    * because we're splitting the string with '/', and the url starts with a '/') 
    */ 
    splittedUrl = splittedUrl.filter(n => n !== ""); 
    for (let idx in paramsKey) { 
     this.routeParams[paramsKey[idx]] = splittedUrl[idx]; 
    } 
    // So here you now have an object with your parameters and their values 
    console.log(this.routeParams); 
    } 
}