Передача нескольких параметров в маршрут angular 4

Здравствуйте, я хочу передать некоторые параметры с маршрутизацией в angular 4

приложение-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 {

}

в компоненте StartGameComponent

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

в компоненте GameComponent

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

        });

в 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>

он выдает мне ошибку

Невозможно сопоставить маршруты. URL-сегмент: 'game; width = 10; height = 10'

ОТВЕТЫ

Ответ 1

Вы смешиваете синтаксис требуемых параметров маршрутизации с необязательными параметрами маршрутизации.

Angular предоставляет три типа параметров маршрута: 1) Необходимые параметры. 2) Необязательные параметры. 3) Параметры запроса.

Необходимые параметры для требуемых значений, например Id для отображения подробной страницы. Требуется ли ширина и высота в вашем случае?

Необязательные параметры - это значения, которые не всегда требуются, например, передача введенных критериев поиска на страницу списка, которая должна использовать эти критерии.

Параметры запроса похожи на необязательные параметры, но вы можете сохранить их по маршрутам. Поэтому, если вы хотите перенаправить куда-нибудь и обратно, вы можете сохранить параметры.

ТОЛЬКО требуемые параметры определяются в конфигурации маршрута. Необязательные и параметры запроса не включены в конфигурацию маршрута (так что путь будет только "игрой" )

Синтаксис для установки параметров затем различается в зависимости от типа:

Необходимые параметры: this.router.navigate(['game', width, height]);

Дополнительные параметры: this.router.navigate(['game', {width:width,height:height}]);

Параметры запроса: this.router.navigate(['game', { queryParams: {width:width, height:height}}])

Для получения дополнительной информации, проверьте это: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

Ответ 2

Мне нужно было что-то вроде передачи нескольких параметров запроса, создавая их динамически. Итак, выполните следующие шаги для достижения того же:

Например,

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