how can route an array as a parameter in angular?

Question

I configured routing module as following:

const routes: Routes = [
  {
    path: "engineering/:branches",
    component: BranchesTabsComponent
  },
  {
    path: "humanities/:branches",
    component: BranchesTabsComponent
  },
];

and in the main-continer.component.ts:

titlesOfEngineeringTabs: string[] = ['E1','E2','E3'];
titlesOfHumanitiesTabs: string[] = ['H1','H2'];
 
constructor(private router: Router) {}

handleEnginTabs():void{
    this.router.navigate(['/engineering', this.titlesOfEngineeringTabs]);
}
handleHumanTabs():void{
    this.router.navigate(['/humanities', this.titlesOfHumanitiesTabs]);
}

and also main-continer.component.html contains:

<router-outlet></router-outlet>

and then in branches-tabs.component.ts have:

tabsLable: string[] = [''];

ngOnInit(): void {
     this.route.params.subscribe(param => this.tabsLable = param["branches"]);
}

till here, it is obvious that we want to replace <router-outlet> with branches-tabs component in which deferent tab labels are shown Depending on selected menu... but I get this error:

*core.mjs:6485 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'engineering;0=%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1;1=%D8%B5%D9%86%D8%A7%DB%8C%D8%B9;2=%D9%85%D8%AA%D8%A7%D9%84%D9%88%D8%B1%DA%98%DB%8C'
Error: Cannot match any routes. URL Segment: 'engineering;0=%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1;1=%D8%B5%D9%86%D8%A7%DB%8C%D8%B9;2=%D9%85%D8%AA%D8%A7%D9%84%D9%88%D8%B1%DA%98%DB%8C'*

how can pass a string array as parameter and fix above error? best regards

score 0 · Answer 1 · answered Feb 08 '22 at 08:20

Angular docs on navigate()

An array of URL fragments with which to construct the target URL. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL or the one provided in the relativeTo property of the options object, if supplied.

If your intent is to have the url look like /engineering/E1/E2/E3 then you should apply the spread operator ... to the arrays and it would look like:

this.router.navigate(['/engineering', ...this.titlesOfEngineeringTabs]);

I applied spread operator, but I get same error. – R. Nourmandi Feb 08 '22 at 09:01 — R. Nourmandi, Feb 08 '22 at 09:01

Chris Hamilton · Answer 2 · 2022-02-08T09:49:03.273

If you want to put the array in the url, it needs to be a string. So you can use JSON.stringify() and JSON.parse()

handleEnginTabs():void{
    this.router.navigate(['/engineering', JSON.stringify(this.titlesOfEngineeringTabs)]);
}

ngOnInit(): void {
     this.route.params.subscribe(param => this.tabsLable = JSON.parse(param["branches"]));
}

But queryParams is probably more appropriate.

  handleEnginTabs(): void {
    this.router.navigate(['/engineering'], {
      queryParams: { branches: this.titlesOfEngineeringTabs },
    });
  }

  ngOnInit(): void {
    this.tabsLable = this.route.snapshot.queryParams['branches'];
  }

and removing the parameter from the path

  {
    path: "engineering",
    component: BranchesTabsComponent
  },

Keep in mind the user can change the values of your array by editing the url. If that's something you don't want to happen, you'll have to use other means of passing the data.

This thread goes over some other ways of passing data to routes:

How do I pass data to Angular routed components?

However, a lot of them will not persist on refresh. So if you want that, you'll have to write to / read from localStorage as well.

how can route an array as a parameter in angular?

2 Answers2