在路线角4中传递多个参数

Question

您好我想通过角度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 {

}

在组件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>

它引发了我的错误

无法匹配任何路线.网址细分:'游戏;宽度= 10;高度= 10'

Answer 1

您正在将所需路由参数的语法与可选路由参数混合使用.

Angular提供三种类型的路由参数:1)必需参数.2)可选参数.3)查询参数.

必需参数用于所需值,例如显示详细信息页面的Id.您的箱子是否需要宽度和高度？

可选参数适用于并非总是需要的值,例如将输入的搜索条件传递到应使用该条件的列表页面.

查询参数与可选参数类似,但您可以跨路径保留它们.因此,如果您想要在某处然后再返回,您可以保留参数.

ONLY必需的参数在路径配置中定义.路由配置中不包含可选和查询参数(因此路径只是'游戏')

根据类型,设置参数的语法会有所不同:

必需参数: 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