Angular 2获取父路线

Question

无论如何，要使用提供的激活路由来获取父路由的集合？

如果我有一个嵌套的路由结构，例如：

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

我的网址将如下所示： /search/view/3/person/5 。

我如何将其转换为某种结构，例如：

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

我看过URLTree和URLSegments，但是看起来它无法区分参数是什么和路径是什么。

Answer 1

您可以运行以下代码，它将返回所需的相同对象。

  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

您可以注入ActivatedRoute ，然后迭代parent属性，直到没有

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

Answer 3

感谢Gunter，我自己想出了一些办法。 这应该足以在您的组件上实现某种面包屑功能。 它与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('/') + '/';
}