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值的值 - 仅为{ "pageId": "33", "detailData": "kro" }，属于最终路线。

但是如何获得以前的路线值？

我知道我可以阅读查询字符串，但我觉得这是一种非传统的方式。

最里面的网址是：

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

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

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

PLNKR

Answer 1

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

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

<强> LIVE DEMO

Answer 2

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

每个州都有相应的解析器，它将解决您之前状态所需的参数。这里是文档的链接：

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获得祖先路线参数？

3 个答案: