Angular2 yönlendirici,

Question

görüntülemek için URL'den rota verilerini al angular2 router kullanıyorum.

1. site.com/a/b/c/15 rotasını alın ve yönlendirmek için ilişkili oldukça adını almak:
   , bir url'nin kırıntı çizmek için aşağıdaki do site.com/a/b/c/15 diyelim
2. site.com/a/b/c rotasını alın ve rota
3. ilişkili oldukça adını almak site.com/a/b rotasını alın ve rota
4. ilişkili oldukça adını almak site.com/a rotasını alın ve ilişkili oldukça adını almak hezimet E

Yani şu yolları var diyelim:

{ 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'}}, 

benim sürecin sonucudur Ben akımını açıklayan güzel bir kırıntı "I am A > I am B > I am C" gösterebilmesi için {"I am C", "I am B", "I am C"} ve teşekkür içeren bir dizidir olurdu rota.

şimdi Ancak yönlendirici-deprecated yapıyor

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

ile çalışmak için bu kullanımı; Son yönlendirici ile bu tanıma mantığını artık işleyemiyorum.

URL ile ilişkili yol verileri nasıl alınır?

Answer 1

Şimdiye kadar, en yapılamadı çözüm (yapıldı) olduğu

:

• ihracat/importable
• router.events url değişikliği üzerinde
• abone geçerli url güncelleme bul döngü yolları yapın pıtır url eşleşirse desen url
• eşleşirse Yollar yolunda, eşleştirme rotadan veri almak, bakınız

Artıları:

Eksileri çalışır: yineleme url rota tanıma manuall bir

Answer 2

geçerli URL ile başlayan ve rotaların almaya çalışırken

yerine RC5 için güncellenmiş NG2 yönlendirici kullanmadan her başarılı navigasyon lifecycl sona erdikten sonra

: URL, sen RouterState den (birincil çıkış ilişkili) aktive yollarının bütün alabilirsiniz e, yönlendirici, yönlendiricinin mevcut durumunu oluşturan ActivatedRoute s bir ağaç oluşturur. Geçerli RouterState ürünümüzü, uygulamanızın herhangi bir yerinden Router hizmetini ve routerState özelliğini kullanarak erişebiliriz.

yönlendirici devlet yukarı hareket etmesi yöntemlerle ve biz ebeveyn, çocuk ve kardeş yolları ihtiyacınız olabilecek bilgileri almak için herhangi bir aktive güzergahtan rota ağacının aşağı bize sağlar.

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); 
     }) 
    } 
} 

Rotaları şuna benzer:

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

- reference

root den ActivatedRoute s ağacı yürümek, her NavigationEnd olaydan sonra, o zaman, yönlendirici olaylara abone

Plunker - RC.5, Yönlendirici 3.0.0-rc.1

---

benzer bir çözüm için de https://stackoverflow.com/a/38310404/215945 bakınız.