कोणीय 2 राउटर, यूआरएल से रूट डेटा प्राप्त करें, ब्रेडक्रंब प्रदर्शित करने के लिए

Question

मैं angular2 router का उपयोग कर रहा हूं।

, एक यूआरएल की ब्रेडक्रम्ब आकर्षित करने के लिए देता है site.com/a/b/c/15 कहते हैं कि मैं निम्नलिखित है:

1. site.com/a/b/c/15 का मार्ग प्राप्त करें और सुंदर मार्ग से जुड़े नाम
2. site.com/a/b/c का मार्ग प्राप्त करें और सुंदर मार्ग
3. से जुड़े नाम site.com/a/b का मार्ग प्राप्त करें और सुंदर मार्ग
4. से जुड़े नाम site.com/a का मार्ग प्राप्त करें और सुंदर करने के लिए जुड़े नाम घोर पराजय ई

तो कहते हैं कि मैं निम्नलिखित मार्गों की क्या ज़रूरत है करने देता है:

{ path: 'a', component: A, data:{prettyName: 'I am A'}} 
{ path: 'b', component: B, data:{prettyName: 'I am B'}}, 
{ path: 'c', component: C, data:{prettyName: 'I am C'}}, 

मेरी प्रक्रिया का परिणाम है कि करने के लिए {"I am C", "I am B", "I am C"} और धन्यवाद युक्त मैं एक अच्छा ब्रेडक्रम्ब "I am A > I am B > I am C" कि मौजूदा बताते प्रदर्शित कर सकते हैं एक सरणी होगा मार्ग।

रूटर-पदावनत कर

this.router.recognize(url).then((instruction) => { 
    instruction.component.routeData.get('prettyName') // Would return 'I am ..' 

हालांकि अब

साथ काम करने के इस प्रयोग; अंतिम राउटर के साथ मैं अब इस पहचान तर्क को संसाधित करने में सक्षम नहीं हूं।

यूआरएल से जुड़े रूट डेटा को कैसे प्राप्त करें?

Answer 1

अब तक, सबसे संभव समाधान (किया) जाता है:

• निर्यात/आयात योग्य
• से router.events सदस्यता ले
• यूआरएल परिवर्तन पर वर्तमान यूआरएल अपडेट प्राप्त करें, पाश मार्गों बनाओ मार्गों के पथ पर है, अगर पैटर्न गपशप यूआरएल से मेल खाते हैं यूआरएल
• से मेल खाते हैं देखते हैं, मिलान मार्ग से डेटा प्राप्त

सकारात्मक: NG2 रूटर एक

Answer 2

वर्तमान URL के साथ शुरू और से मार्गों प्राप्त करने की कोशिश की

इसके बजाय RC5 के लिए अपडेट किया गया का उपयोग किए बिना redoing यूआरएल मार्ग मान्यता manuall: काम करता है

विपक्ष यूआरएल, आप RouterState से सक्रिय मार्गों (प्राथमिक आउटलेट के साथ जुड़े) के सभी प्राप्त कर सकते हैं:

प्रत्येक सफल नेविगेशन lifecycl के अंत के बाद ई, राउटर ActivatedRoute एस का पेड़ बनाता है, जो राउटर की वर्तमान स्थिति बनाता है। हम Router सेवा और routerState संपत्ति का उपयोग कर हमारे आवेदन में कहीं भी से RouterState तक पहुंच सकते हैं।

राउटर राज्य हमें किसी भी सक्रिय मार्ग से रूट पेड़ को ऊपर और नीचे जाने के तरीकों के साथ प्रदान करता है ताकि हमें माता-पिता, बच्चे और भाई मार्गों से जानकारी प्राप्त हो सके। - reference

,, रूटर घटनाओं के लिए सदस्यता लें तो प्रत्येक NavigationEnd घटना के बाद, root से ActivatedRoute के पेड़ नीचे चलना:

import { Component } from '@angular/core'; 
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; 
import 'rxjs/add/operator/filter'; 

@Component({ 
    selector: 'breadcrumbs', 
    template: ` 
    <div> 
    breadcrumbs: 
    <span *ngFor="let breadcrumb of breadcrumbs; let last = last"> 
     <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a> 
     <span *ngIf="!last">></span> 
    </span> 
    </div>` 
}) 
export class BreadcrumbsComponent { 
    breadcrumbs: Array<Object>; 
    constructor(private router:Router, private route:ActivatedRoute) {} 
    ngOnInit() { 
    this.router.events 
     .filter(event => event instanceof NavigationEnd) 
     .subscribe(event => { // note, we don't use event 
     this.breadcrumbs = []; 
     let currentRoute = this.route.root, 
      url = ''; 
     do { 
      let childrenRoutes = currentRoute.children; 
      currentRoute = null; 
      childrenRoutes.forEach(route => { 
      if(route.outlet === 'primary') { 
       let routeSnapshot = route.snapshot; 
       console.log('snapshot:', routeSnapshot) 
       url += '/' + routeSnapshot.url.map(segment => segment.path).join('/'); 
       this.breadcrumbs.push({ 
       label: route.snapshot.data.breadcrumb, 
       url: url }); 
       currentRoute = route; 
      } 
      }) 
     } while(currentRoute); 
     }) 
    } 
} 

मार्गों इस तरह दिखेगा:

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}} 

Plunker - आरसी.5, रूटर 3.0.0-rc.1

---

एक ऐसी ही समाधान के लिए भी https://stackoverflow.com/a/38310404/215945 देखें।