Question

在互联网上进行了大量研究并通过了Offical Angular Doc路由后，我还没有找到一个可行的解决方案，因此在此处发布此问题，不知道我是问错了方向还是完全问了错同步，请多多包涵，我是Angular的新手。

基本上我想定义一个采用多个可选参数的路由。

在我的“路由”模块中，我正在定义这样的路由

const appRoutes: Routes = [
  {path: 'game/:width/:height',component: GameComponent
}];

如果我是https://localhost:4200/game/50/80的Naviagte，效果很好

但给出“无法匹配任何路由例外” 为https://localhost:4200/game/50/

我该如何定义一条可以双向运行的路线（有/没有高度）

即使使用查询参数的解决方案也可以，例如https://localhost:4200/?width=50&height=80

Answer 1

不太确定它是否可行以及是否是一条不错的路，但是我会尝试创建一些指向相同GameComponent的子路线，例如：

const appRoutes: Routes = [
{
  path: 'game',
  children: [
     { path: '', component: GameComponent },
     { path: ':width', component: GameComponent },
     { path: ':width/:height', component: GameComponent }
  ]
}];

所以我可以使用/ game / game / 50和/ game / 50/80，并根据情况根据某些参数对GameComponent ngOnInit中的逻辑进行管理：

width: number;
height: number;

ngOnInit() {

   this.route.paramMap.subscribe(params => {
         if (params['width'] && params['height']) {
          this.width = +params['width'];  // + converts string 'width' to a number
          this.height = +params['height'];
          // /game/50/80 - do something
        } else if (params['width']) {
          this.width = +params['width'];
          // /game/50 - do something
        } else {
          // /game - do something
        }
   }

}

然后我可以解决this.width！this.width和this.height！this.height来处理组件中的不同情况

否则，我也将以同样的方式探索queryParamMap路径，或者像这样的带有Snapshot系统的ActivatedRoute：

this.width = this.route.snapshot.paramMap.get('width');
this.height = this.route.snapshot.paramMap.get('height');

if (this.width && this.height) {
  // do something
} else if (this.width && !this.height) {
  // do something
} else {
  // /game
}

链接：Angular Routing: Route Parameters

如何在Angular中定义采用可选参数的Route？

1 个答案: