は角度経路に複数のparamsを通過4

Question

こんにちはI成分に角度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 { 

} 

にルーティングといくつかのparamsを通過したいStartGameComponent

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

コンポーネント内GameComponent

0123それはだ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> 

で

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

     }); 

は

は、任意のルートを照合することはできません、私のエラーがスローされます。 URLセグメント： 'game; width = 10; height = 10'

Answer 1

オプションのルーティングパラメータを持つ必要ルーティングパラメータの構文を混合しています。

Angularは、3種類のルートパラメータを提供します。 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

Answer 2

ルート定義から/：高さを削除してもう一度やり直してください。 https://angular.io/docs/ts/latest/guide/router.html#!#optionally-selecting https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

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