Angular 6路由参数

发布时间：2020-12-17 18:07:02 所属栏目：安全来源：网络整理

导读：目前我正在为我的应用使用此路由设置： { path: ':group',component: ArticleListComponent,children: [{ path: ':subgroup',children: [{ path: ':chapter',children: [{ path: ':section',children: [ ] } ] } ] } ]}, 我使用相同的组件来列出文章,因为模

目前我正在为我的应用使用此路由设置：

{
  path: ':group',component: ArticleListComponent,children: [{
      path: ':subgroup',children: [{
          path: ':chapter',children: [{
              path: ':section',children: [
              ]
            }
          ]
        }
      ]
    }
  ]
},

我使用相同的组件来列出文章,因为模板和代码不会改变,但我想使用url来过滤这些文章.应用程序应该使用路由参数而不是获取参数.有了这些参数,我想调用一个API来获取属于这个url的文章：/ group1 / subgroup1 / chapter1 / section1.

问题是我只使用以下代码获取这些参数：

const params = this.route.snapshot.params;
// {group: "group1"}

const params = this.route.parent.snapshot.params;
// {}

const params = this.route.firstChild.snapshot.params;
// {group: "group1",subgroup: "subgroup1"}

我怎么能一次得到所有这些参数？

解决方法

使用查询参数而不是参数.它将大大简化您的路由配置.

routing.ts

{
  path: '',component: ArticleListComponent
}

文章-list.component.ts

constructor(route: ActivatedRoute) {
  route.queryParams.pipe(
    map(({ group,subgroup,chapter,section }) => 
      ({ group,section }))
  ).subscribe( ... )
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!