passing multiple params in route angular 4

19
votes

Hello I want to pass some params with routing in angular 4

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { StartGameComponent } from './start-game/start-game.component';
import { GameComponent } from './game/game.component';


const appRoutes: Routes = [
  { path: '', redirectTo: '/first', pathMatch: 'full' },
  { path: 'startGame', component: StartGameComponent },
  {path: 'game/:width/:height',component: GameComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

in component StartGameComponent 

      goToGameComponent(width:string,height:string){
      this.router.navigate(['game', {width:width,height:height}]);
}

in component GameComponent

 ngOnInit() {
        this.route.params.forEach((urlParams) => {
          this.width= urlParams['width'];
          this.height=urlParams['height'];

        });

in app.component.html

<div>
  <md-toolbar color="primary">
    <span>MineSweeper Wix</span>

  </md-toolbar>
  <router-outlet></router-outlet>

  <span class="done">
    <button md-fab>
      <md-icon>check circle</md-icon>
    </button>
  </span>
</div>

it's throws my an error

Cannot match any routes. URL Segment: 'game;width=10;height=10'

3
angularangular2-routing

3 Answers

52
votes

You are mixing the syntax for required routing parameters with optional routing parameters.

Angular provides three types of route parameters: 1) Required parameters. 2) Optional parameters. 3) Query parameters.

Required parameters are for required values, such as an Id to display a detail page. Is the width and height required in your case?

Optional parameters are for values that are not always required, such as passing entered search criteria to a list page that should use that criteria.

Query parameters are similar to optional parameters but you can retain them across routes. So if you want to route somewhere and back again, you can retain the parameters.

ONLY required parameters are defined in the route configuration. Optional and query parameters are not included in the route configuration (so the path would be just 'game')

The syntax to set the parameters is then different depending on the type:

Required parameters: this.router.navigate(['game', width, height]);

Optional parameters: this.router.navigate(['game', {width:width,height:height}]);

Query parameters: this.router.navigate(['game', { queryParams: {width:width, height:height}}])

For more information, check this out: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

1
votes

I was in need of something like to pass the multiple query parameters constructing them dynamically. So, perform the below steps to achieve the same:

For e.g.,

const arrayItem = [{ source: "external" }, { fileFiler: "File Name 1" }];
const queryParams = arrayItem.reduce((arrObj, item) => Object.assign(arrObj, item, {}));  // this will convert into single object. 

// Output: {source: "external", fileFiler: "File Name 1"}

And finally called the below line to pass the same into route:

this.router.navigate([], { relativeTo: this.activatedRoute, queryParams });

Hope this helps!

0
votes

I had a similar issue and this information was extremely helpful, it is described a step by step guidelines here