2016-12-20 125 views
2

无论如何,有一个提供的激活路线获得父路线的收集?Angular 2获取父路线

如果我有一个嵌套的航线结构,如:

[ 
    { 
     path: 'search', component: SearchComponent, children: 
     [ 
      { 
       path: 'view/:id', component: ViewSearchComponent, children: 
       [ 
        { path: 'person/:id', component: PersonComponent } 
       ] 
      }, 
     ] 
    } 
] 

我的URL看起来像这样:/search/view/3/person/5

我怎样才能把它转换成某种状结构:

[ 
    { part: 'search' } 
    { part: 'view/3' } 
    { part: 'person/5' } 
] 

我已经看过了URLTree和URLSegments,但看起来像将无法之间有什么参数来区分它什么是路径。

回答

2

可以运行下面的代码,则系统会返回你想同一个对象。

import {ActivatedRoute} from '@angular/router'; 

    export class Component { 

     constructor(private route: ActivatedRoute){ 
       let pathroots = this.route.pathFromRoot; 
       let arr = []; 
       pathroots.forEach(path => { 
        let obj: any = {}; 
        let pathurl = ''; 
        path.url.subscribe(url => { 
         url.forEach(e => { 
          pathurl += e + '/'; 
         }); 
        }); 
        obj['part'] = pathurl; 
        arr.push(obj); 
      }); 
      console.log(arr,'*******************'); 
      } 

} 
+0

希望这将解决您的问题 –

+0

我已经有东西写了,我看到你的答案的时候,但它们看起来几乎相同。谢谢! – Steveadoo

0

感谢Gunter,我自己想出了一些东西。这应该足以在组件上实现某种Breadcrumb功能。这几乎是一样的Vikash不过是多一点“rxjs'y”

private urlSub: Subscription; 

private buildNavigationTree(): void { 
    const pathFromRoot = this.activatedRoute.pathFromRoot; 
    let urlSub = Observable.merge(...pathFromRoot.map(p => p.url)); 
    let urlList: any[] = []; 
    let url; 
    //TODO somehow we have to recalculate the WHOLE thing on url change 
    //right now if part of the url changes i think it'll append to the end. 
    //possibly use navigationend? 
    this.urlSub = urlSub.subscribe(segments => { 
     //skip empty segments which show up sometimes 
     if (segments.length == 0) { 
      return; 
     } 
     url = this.buildUrl(url, segments); 
     urlList.push({ 
      url: url 
     }); 
    }); 
} 

private buildUrl(url: string, segment: UrlSegment[]): string { 
    return url + segment.map(s => s.path).join('/') + '/'; 
}