javascript - 在 Angular 中获取祖先路由参数？

Question

我有以下路由层次结构:

const appRoutes:Routes = [
  {
     path: 'article',
     component: ArticleComponent,
     children: [
     {
         path: '',
         component: ArticleListComponent
     },
     {
         path: ':articleId',
         component: ArticleDetailComponent,
          children: [
          {
              path: '',
              component: PageListComponent
          },
          {
              path: ':pageId',
              component: PageComponent
          }]
     }]
 },
  {path: '**', component: DefaultComponent},
];

当我单击 Article 链接时，页面导航到:

"https://run.plnkr.co/article;listData=foo "

然后我看到了这个:

现在，当我点击 Article 2 时，页面被导航到

"https://run.plnkr.co/article;listData=foo/2;detailData=bar "

然后我看到了这个:

现在，当我单击 Page 33 链接时，页面导航到:

"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro "

然后我看到了这个:

确定

如您所见，在最里面的组件(单页组件)，我设置了一些代码来查看当前参数:

Page  component! {{params | json}}

填充于:

export class PageComponent {
   constructor(private activatedRoute_:ActivatedRoute) {
    activatedRoute_.params
      .subscribe(params => {
        this.params=params;
      });
  }

问题:

目前params value - 只有{ "pageId": "33", "detailData": "kro"} 属于最终路由。

但是我怎样才能得到以前的路线值呢？

我知道我可以读取查询字符串，但我发现它是一种非常规的方式。

最里面的 url 是:

"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro "

所以基本上我问的是如何从之前的 route 提取所有参数。

(我的意思是 articleId 、 listData 、 detailsData _(第一个) 的值是什么) ？

PLNKR

Answer 1

您可以使用快照获取所有父参数。详细组件:

let node = activatedRoute_.snapshot;
while(node) {
  console.log('component', node.component.name, ', params:', node.params);
  node = node.parent;
}

 component ArticleDetailComponent , 
            params: Object {articleId: "1", detailData: "bar"}
 component ArticleComponent , params: Object {listData: "foo"}
 component RootComponent , params: Object {}