how can route an array as a parameter in angular?-CodePudding

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=کامپیوتر;1=صنایع;2=متالورژی'
Error: Cannot match any routes. URL Segment: 'engineering;0=کامپیوتر;1=صنایع;2=متالورژی'*

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

CodePudding user response：

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]);

CodePudding user response：

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.