在路线角度 4 中传递多个参数 [英] passing multiple params in route angular 4

问题描述

你好，我想通过 angular 4 中的路由传递一些参数

app-routing.module.ts

import { NgModule } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './start-game/start-game.component' 导入 { StartGameComponent };从 './game/game.component' 导入 { GameComponent };const appRoutes: 路由 = [{ path: '', redirectTo: '/first', pathMatch: 'full' },{ path: 'startGame', 组件: StartGameComponent },{path: 'game/:width/:height',component: GameComponent}];@NgModule({进口:[RouterModule.forRoot(appRoutes)]，出口:[路由器模块]})导出类 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 中

<md-toolbar color="primary"><span>MineSweeper Wix</span></md-工具栏><路由器插座></路由器插座><span class="done"><按钮 md-fab><md-icon>勾号</md-icon></span>

它抛出了我的错误

<块引用>

无法匹配任何路由.网址段:'game;width=10;height=10'

解决方案

您将必需路由参数的语法与可选路由参数混合在一起.

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

Hello I want to pass some params with routing in angular 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 {

}

in component StartGameComponent

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

in component GameComponent

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

        });

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

it's throws my an error

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

解决方案

You are mixing the syntax for required routing parameters with optional routing parameters.

Angular provides three types of route parameters: 1) Required parameters. 2) Optional parameters. 3) Query parameters.

Required parameters are for required values, such as an Id to display a detail page. Is the width and height required in your case?

Optional parameters are for values that are not always required, such as passing entered search criteria to a list page that should use that criteria.

Query parameters are similar to optional parameters but you can retain them across routes. So if you want to route somewhere and back again, you can retain the parameters.

ONLY required parameters are defined in the route configuration. Optional and query parameters are not included in the route configuration (so the path would be just 'game')

The syntax to set the parameters is then different depending on the type:

Required parameters: this.router.navigate(['game', width, height]);

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

Query parameters: this.router.navigate(['game', { queryParams: {width:width, height:height}}])

For more information, check this out: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents

这篇关于在路线角度 4 中传递多个参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！