获取 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 link 时，页面导航到：

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

然后我看到这个：

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

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

然后我看到这个：

现在，当我单击 Page 33 link 时，页面导航到：

"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"

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

（我的意思是 articleId 、 listData 、 detailsData _{（第一个）} 的值是多少）？

PLNKR

Answer 1

您应该将 listData 值与 object.Modify 一起发送到您的 app/article-list.component.ts 组件

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

LIVE DEMO

Answer 2

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

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

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

概念是在第i个状态的解析中，你仍然可以访问第i-1个状态的状态参数，所以你可以将它们传递给新的状态。

Answer 3

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

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 {}

获取 Angular 中的祖先路由参数？

Get ancestor route params in Angular?

javascript

angular-routing

angular