Angular 6路由参数

前端之家收集整理的这篇文章主要介绍了Angular 6路由参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我正在为我的应用使用此路由设置:

{
  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( ... )
}

猜你在找的Angularjs相关文章