Angular 2获取父路线

Question

Is there anyway to get a collection of the parent routes with a provided activated route?

If I have a nested route structure like:

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

My url will look like this: /search/view/3/person/5 .

How can I turn that into some sort of structure like:

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

I've looked at the URLTree and URLSegments, but that looks like it won't be able to differentiate between what's the parameters and what's the path.

Answer 1

you can run following code, it will return same object that you want.

  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,'*******************');
           }

 }

Answer 2

You can inject ActivatedRoute and then iterate the parent property until there is none

https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html#!#parent-anchor

Answer 3

I came up with something on my own, thanks to Gunter. This should be good enough to implement some sort of Breadcrumbs feature on your component. It's pretty much the same as Vikash but is a bit more "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('/') + '/';
}