прохождение нескольких параметров в route angular 4

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

app-маршрутизация.модуль.ТС

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

        });

в приложение.деталь.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'

6
angular angular2-routing

1 ответов

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

угловой обеспечивает три типа параметров маршрута: 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

21