Angular 6 routing params

Question

Currently I'm using this routing setup for my app:

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

I use the same component for listing articles because the template and code will not change, but I want to use the url for filtering these articles. The app should work with routing params instead of get params. With these params I want to call an API to get the articles which belong to this url: /group1/subgroup1/chapter1/section1.

The problem is that I only get these params with the following code:

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

How can I get all these params at once?

Tomasz Kula · Accepted Answer · 2018-07-23 10:07:05Z

0

Use query params instead of params. It will greatly simplify your routing configuration.

routing.ts

{
  path: '',
  component: ArticleListComponent
}

article-list.component.ts

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

answered Jul 23, 2018 at 10:07

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

loopezz Over a year ago

I know it would be easier, but it's not the best for SEO and url readability. Users can visit the following urls:

- /webshop - /webshop/group1 - /webshop/group1/subgroup1 - /webshop/group1/subgroup1/chapter1 - /webshop/group1/subgroup1/chapter1/section1

It's get more specific each time.

beingdeveloper · Accepted Answer · 2018-07-23 11:47:31Z

0

If in case, you have to go with route params instead of query params, there is no direct way as such. You can use the below snippet in ArticleListComponent

routerParams: any = {};
  
  constructor(private router: ActivatedRoute) {
    this.router.params.subscribe(params => {
    this.getRouteParams(); 
    console.log(this.routerParams);  
    });
    
  }

  /**
  * API to return all the route params as key value pairs
  */
  getRouteParams() {
    let currentRouter = this.router;
    let isChildRoutesExist: boolean = currentRouter ? true : false;
    while(isChildRoutesExist) {
      currentRouter.paramMap.subscribe(params => {
        const keys = params.keys;
        for(const key of keys) {
         //Sample output : {group: "group1", subgroup: "subgroup1", chapter: "chapter1", section: "section1"}
          this.routerParams[key] = params.get(key);
        }
      });
      if(currentRouter.firstChild) {
        currentRouter = currentRouter.firstChild;
      } else {
        isChildRoutesExist = false;
      }
    }
  }

answered Jul 23, 2018 at 11:47

beingdeveloper

13 bronze badges

3 Comments

loopezz Over a year ago

This almost what I need! Only 1 issue left: parameters have to be updated each time the view has been entered (clear & generate parameters again).

loopezz Over a year ago

getRouteParams() { this.routerParams = {}; ... } However, entering a child view doesn't trigger this function.

beingdeveloper Over a year ago

I'm not sure what you are mentioning about entering a child view. I assume when the route params updated it is a page reload wherein params will be listened. Please add more information if otherwise.

Collectives™ on Stack Overflow

Angular 6 routing params

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related