在路由 angular 4 中传递多个参数

Question

你好，我想在 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>

它给我一个错误

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

Answer 1

您将必需路由参数的语法与可选路由参数混合使用。

Angular提供三种路由参数： 1) 必需的参数。 2) 可选参数。 3) 查询参数。

必填参数为必填值，比如显示详情页的Id。您的情况需要宽度和高度吗？

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

查询参数类似于可选参数，但您可以跨路由保留它们。所以如果你想路由到某个地方再返回，你可以保留参数。

ONLY 必需的参数在路由配置中定义。可选参数和查询参数不包含在路由配置中（因此路径只是'game'）

设置参数的语法因类型而异：

所需参数：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

我需要一些类似的东西来传递动态构造它们的多个查询参数。因此，执行以下步骤来实现相同的目的：

例如，

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

最后调用下面的行将其传递到路由中：

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

希望对您有所帮助！

在路由 angular 4 中传递多个参数

passing multiple params in route angular 4

angular2-routing

angular