कोणीय 2: मार्ग पैरामीटर को subroute कैसे पास करें?

Question

कोणीय 2 आरसी .1 और टाइपस्क्रिप्ट का उपयोग करना। जब घटक को सब्रॉउट में लोड किया जाता है तो मुझे अपने घटक में रूटिंग पैरामीटर पास करने में बहुत परेशानी हो रही है। मैं @angular/router-deprecated पैकेज का उपयोग करता हूं।

@RouteConfig([ 
    {path:'/top', name:'Top', component: EndPointComponent}, 
    {path:'/sub/...', name:'Sub', component: MiddleManComponent} 
]) 

यहाँ endpoint घटक वह जगह है जहाँ मैं मापदंडों

import {Component} from '@angular/core'; 
import {RouteParams} from '@angular/router-deprecated'; 
@Component({ 
    template: 'Route Params: {{routeParams.params | json}}' 
}) 
export class EndPointComponent{ 
    constructor(private routeParams:RouteParams){} 
} 

यहाँ है पढ़ने के लिए प्रयास:

मेरी जड़ घटक में, मैं इस तरह के रूप में कॉन्फ़िगर किया गया मार्गों midman घटक subPoute के साथ EndPointComponent

import {Component} from '@angular/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {EndPointComponent} from "./endpoint.component"; 

@Component({ 
    directives: [ROUTER_DIRECTIVES] 
    template: `<router-outlet></router-outlet>` 
}) 
@RouteConfig([ 
    {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true} 
]) 
export class MiddleManComponent {} 

पैरामीटर सफलतापूर्वक EndPointComponent की routeParams वस्तु से पढ़ा जा सकता है जब घटक शीर्ष स्तर के मार्ग से भरी हुई है (जैसे: मार्ग नामित जड़ घटक में 'टॉप')। हालांकि, पैरामीटर हमेशा खाली होते हैं जब मैं EndPointComponent पर throug MiddleManComponent (उदाहरण के लिए: रूट घटक में 'सब' नामक मार्ग के माध्यम से EndPointComponent पर नेविगेट करता हूं।

क्या बच्चों के राउटर मार्गों को हल करने से पहले माता-पिता से पैरामीटर साफ़ करते हैं? इससे ज्यादा समझ नहीं आती है इसलिए मुझे यकीन है कि मुझे कुछ याद आ रहा है। मेरा सवाल बस है: मैं रूट पैरामीटर को सबराउट में कैसे पास करूं?

पीएस: मैंने demo this setup पर प्लंकर बनाने की कोशिश की लेकिन मैंने छोड़ दिया जब मुझे पता नहीं चला कि एप्लिकेशन लोड क्यों नहीं होता है।

Answer 1

बाल मार्गों को वास्तव में रूट मार्गों का अपना उदाहरण मिलता है, जो माता-पिता मार्ग से अलग होते हैं। यह टकराव नामकरण से बचने और मार्गित घटक के encapsulation की सुविधा के लिए किया जाता है।

एक तरीका आप एक बच्चे मार्ग द्वारा लोड किए गए घटक के साथ एक पैरेंट रूट के पैरामीटर साझा कर सकते हैं एक सेवा के माध्यम से है।

@Injectable() 
export class RouteParamService { 
    constructor(private routeParams: RouteParams) {} 

    get params() { 
    return this.routeParams.params; 
    } 
} 

@Component({ 
    template: 'Route Params: {{routeParams.params | json}}' 
}) 
export class EndPointComponent{ 
    constructor(private routeParams:RouteParamService){} 
} 

@Component({ 
    directives: [ROUTER_DIRECTIVES] 
    template: `<router-outlet></router-outlet>`, 
    providers: [RouteParamService] 
}) 
@RouteConfig([ 
    {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true} 
]) 
class MiddleManComponent() { } 

RouteParamService MiddleManComponent रूप में एक ही मार्ग के स्तर पर instantiated किया जाएगा और इसलिए RouteParams का एक ही उदाहरण मिल जाएगा। जब आपकी सेवा आपके बच्चे के रूट घटक में इंजेक्शन दी जाती है, तो आप पैरेंट रूट पैराम तक पहुंच पाएंगे।

यदि आपको विभिन्न रूट पेड़ स्तरों पर लोड करने के लिए एंडपॉइंट कॉम्पोनेंट के 2 उदाहरणों की आवश्यकता है, तो आपको लगता है कि माता-पिता मार्ग का एक और स्तर चाहिए, मुझे लगता है; यानी एक रूट घटक जो रूटकंपोनेंट के बीच, MiddleManComponent और EndPointComponent दोनों को encapsulates करता है।

रूटकंपोनेंट मार्गित नहीं है, इसलिए आप रूटपेराम सेवा के लिए रूटपेराम को तुरंत चालू नहीं कर पाएंगे। रूट पैराम <router-outlet> घटक द्वारा प्रदान किया जाता है।

Answer 2

"@ कोणीय/राउटर" का उपयोग करना: "3.0.0-अल्फा।6 "पैकेज, मैं निम्न कार्य करके माता-पिता मार्ग तर्क प्राप्त करने में सक्षम था:

export class ChildComponent { 

    private sub: any; 

    private parentRouteId: number; 

    constructor(
     private router: Router, 
     private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.sub = this.router.routerState.parent(this.route).params.subscribe(params => { 
      this.parentRouteId = +params["id"]; 
     }); 
    } 

    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
} 

इस उदाहरण में मार्ग निम्न स्वरूप है: /parent/:id/child/:childid

export const routes: RouterConfig = [ 
    { 
     path: '/parent/:id', 
     component: ParentComponent, 
     children: [ 
      { path: '/child/:childid', component: ChildComponent }] 
    } 
]; 

Answer 3

आप ActivatedRote इंजेक्षन और एक ले जा सकते हैं स्नैपशॉट, और भी आसान:

constructor(private route: ActivatedRoute) {}; ngOnInit() { console.log('one of my parents route param:', this.route.snapshot.parent.params['PARAM-NAME']); }

Answer 4

@angular/router@3.4.7 का उपयोग करके आप पा उपयोग कर सकते हैं किराया ActivatedRoute

export class ChildComponent implements OnInit { 

    parentRouteId: string; 

    constructor(private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.parent.params 
     .subscribe((params: Params) => this.parentRouteId = params['id']); 
    } 
}