कोणीय मार्ग में Angular2 मार्ग पर पैरामीटर कैसे प्राप्त करें?

Question

मार्ग

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

अंग

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

लिंक का उदाहरण: http://localhost:8099/#/companies/bdo

मैं ऊपर दिए गए उदाहरण लिंक में String bdo प्राप्त करना चाहता हूं ।

मुझे पता है कि मैं window.location.href का उपयोग करके लिंक प्राप्त कर सकता हूं और सरणी में विभाजित हो सकता हूं। इसलिए, मैं आखिरी परम प्राप्त कर सकता हूं लेकिन मैं यह जानना चाहता हूं कि क्या कोणीय तरीके से ऐसा करने का कोई उचित तरीका है।

किसी भी सहायता की सराहना की जाएगी। धन्यवाद

Answer 1

अपडेट: सितम्बर २०१ ९

जैसा कि कुछ लोगों ने उल्लेख किया है, मापदंडों paramMapको आम Mapएपीआई का उपयोग करके एक्सेस किया जाना चाहिए :

परिमों का एक स्नैपशॉट प्राप्त करने के लिए, जब आप ध्यान नहीं देते कि वे बदल सकते हैं:

this.bankName = this.route.snapshot.paramMap.get('bank');

पैरामीटर मानों में परिवर्तन के लिए सदस्यता लेने और सतर्क रहने के लिए (आमतौर पर राउटर के नेविगेशन के परिणामस्वरूप)

this.route.paramMap.subscribe( paramMap => {
    this.bankName = paramMap.get('bank');
})

अपडेट: अगस्त २०१ Aug

कोणीय 4 के बाद paramsसे, नए इंटरफ़ेस के पक्ष में पदावनत किया गया है paramMap। उपरोक्त समस्या के लिए कोड काम करना चाहिए यदि आप बस एक को दूसरे के लिए स्थानापन्न करते हैं।

मूल उत्तर

यदि आप ActivatedRouteअपने घटक में इंजेक्ट करते हैं, तो आप मार्ग मापदंडों को निकालने में सक्षम होंगे

    import {ActivatedRoute} from '@angular/router';
    ...
    
    constructor(private route:ActivatedRoute){}
    bankName:string;
    
    ngOnInit(){
        // 'bank' is the name of the route parameter
        this.bankName = this.route.snapshot.params['bank'];
    }

यदि आप उपयोगकर्ताओं से बैंक से सीधे बैंक में नेविगेट करने की उम्मीद करते हैं, तो पहले किसी अन्य घटक को नेविगेट किए बिना, आपको एक अवलोकन योग्य के माध्यम से पैरामीटर का उपयोग करना चाहिए:

    ngOnInit(){
        this.route.params.subscribe( params =>
            this.bankName = params['bank'];
        )
    }

डॉक्स के लिए, दोनों के बीच के अंतर सहित इस लिंक को देखें और " एक्टिवेटआउट " खोजें।

Comments

क्या कोई प्रतिबंध है जहां मूल घटक के रूटर-आउटलेट में लोड किए गए घटक अलग-अलग ActiveRoute पैरामीटर देखेंगे - मैंने एक ऐसे मामले में भाग लिया है, जहां माता-पिता एक पैरामीटर देखते हैं, लेकिन निहित घटक समान पैरामीटर नहीं देखते हैं ...

— नियोहेयूरिस्ट

यह मेरे लिए काम नहीं कर रहा था क्योंकि मैंने अपने घटक के लिए एक प्रदाता के रूप में एक्टिवेटेडरूट को जोड़ा। तो, सुनिश्चित करें कि आप ऐसा नहीं करते हैं! यह कोणीय 4.2.4 के साथ एक आकर्षण की तरह काम कर रहा है।

— थॉमस वेबर

इसके लिए paramMap, आपको params.get('bank')इसके बजाय उपयोग करना चाहिए ।

— zurfyx

बीच क्या अंतर है this.route.snapshot.paramMap.get('bank');और this.route.snapshot.params.bank;?

— गिल एप्सटेन

Answer 2

कोणीय 6+ के रूप में, यह पिछले संस्करणों की तुलना में थोड़ा अलग तरीके से संभाला जाता है। जैसा कि @BeetleJuice ऊपर दिए गए उत्तर में उल्लेख करता है , paramMapमार्ग परिमार्जन प्राप्त करने के लिए नया इंटरफ़ेस है, लेकिन एंगुलर के हाल के संस्करणों में निष्पादन थोड़ा अलग है। यह मानते हुए कि यह एक घटक में है:

private _entityId: number;

constructor(private _route: ActivatedRoute) {
    // ...
}

ngOnInit() {
    // For a static snapshot of the route...
    this._entityId = this._route.snapshot.paramMap.get('id');

    // For subscribing to the observable paramMap...
    this._route.paramMap.pipe(
        switchMap((params: ParamMap) => this._entityId = params.get('id'))
    );

    // Or as an alternative, with slightly different execution...
    this._route.paramMap.subscribe((params: ParamMap) =>  {
        this._entityId = params.get('id');
    });
}

मैं दोनों का उपयोग करना पसंद करता हूं क्योंकि फिर प्रत्यक्ष पृष्ठ लोड पर मुझे आईडी परम मिल सकता है, और यह भी कि संबंधित संस्थाओं के बीच नेविगेट करने पर सदस्यता ठीक से अपडेट हो जाएगी।

स्रोत में कोणीय डॉक्स

Comments

यहाँ क्यों switchMapआवश्यक होगा ? क्या प्रत्यक्ष पृष्ठ लोड होने पर भी सदस्यता प्राप्त नहीं होगी?

— क्रश करें

@crush ऊपर दिए गए डॉक्स से: "आप आरएक्सजेएस mapऑपरेटर का उपयोग करने के लिए सोच सकते हैं । लेकिन HeroServiceरिटर्न ए Observable<Hero>। इसलिए आप ऑपरेटर के साथ ऑब्जर्वेबल को चपटा करते हैं switchMap। switchMapऑपरेटर भी इन-फ्लाइट अनुरोधों को रद्द कर देता है। यदि उपयोगकर्ता फिर से नेविगेट करता है। एक नए के साथ इस मार्ग idहै, जबकि HeroServiceअभी भी पुराने पुनर्प्राप्त कर रहा है id, switchMapछोड देता है पुराने अनुरोध और रिटर्न नए के लिए नायक कि id। "

— KMJungersen