在 Angular 中获取祖先路由参数？答案

【问题标题】：Get ancestor route params in Angular?在 Angular 中获取祖先路由参数？
【发布时间】：2017-05-14 15:32:04
【问题描述】：

我有以下路线层次结构：

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”

然后我看到了这个：

好的

如你所见，在最里面的组件（单页组件），我设置了一些代码来查看 current 参数：

Page  component! {{params | json}}

填充在：

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

问题：

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

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

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

最里面的url是：

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

所以基本上我在问如何从 prev 路由中提取所有参数。

（我的意思是 articleId ， listData ， detailsData _{（第一个）} 的值是什么？

PLNKR

【问题讨论】：

标签： javascript angular angular-routing

【解决方案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 {}

【讨论】：

【解决方案2】：

您应该将listData 值与对象一起发送。将其修改为您的app/article-list.component.ts 组件

<a [routerLink]="[articleId, {listData:'foo',detailData: 'bar'}]">

LIVE DEMO

【讨论】：

【解决方案3】：

您可以在调用链接内的状态时手动发送参数，但老实说这不是最好的解决方案。我更好的建议是使用状态的解析块并实施解析器来实现这一点。

每个状态都会有相应的解析器，它会从前一个状态解析您需要的参数。这里是文档的链接：

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

概念是在第i个状态的resolve里面，你仍然可以访问第i-1个状态的状态参数，所以你可以把它们传递给新的状态。

【讨论】：