Question

我是前端开发的新手。想象一下，我有一个菜单页面，其中包含3个导航到的选项：

去竞技场。
去地牢。
去战场。

但是，如果我单击这三个选项中的任何一个，我将跳到一个公共页面，假设这是字符选择：

/ characterPicking

如果我们完成选择并单击下一步，我们将导航至武器挑选：

/ weaponPicking

在那之后，我们最终将跳转到我们想要的页面：

/竞技场，/地牢或战场

{ path: '', component: MenuComponent },
{ path: 'arena', component: ArenaComponent },
{ path: 'dungeon', component: DungeonComponent},
{ path: 'battleground', component: BattlegroundComponent},
{ path: 'characterPicking', component: CharacterPickingComponent},
{ path: 'weaponPicking', component: WeaponPickingComponent},
{ path: '**', redirectTo: ''},

如果上面是我的寻路。如您所见，角色选择和武器选择是常见的组件。如果我将路径/ characterPicking绑定到菜单页面上的3个选项。并将/ weaponPicking绑定到characterPicking页面上的Next Button。然后如何绑定武器选择页面上“下一步”按钮的路径，如何让武器选择页面知道下一步应该进入哪个页面？竞技场/地牢/战地？

我希望我能解释清楚。

Answer 1

好的，您有三个按钮，但是它们全部都导航到相同的路径“ / characterPicking”。我认为您应该在浏览和存储用户按下的抽动按钮之前管理按钮单击。然后用户选择他的角色并导航到“ / weaponPicking”，当他按下最后一个下一个按钮时，您应该阅读该选项并导航到“竞技场”，“地牢”或“战场”之间的正确路径。

我认为是这样的

@Component({
  selector: 'app-menu',
  template: `
    <button (click)="go('arena')">Arena</button>
    <button (click)="go('dungeon')">Dungeon</button>
    <button (click)="go('battlegroud')">Battleground</button>
  `,
  styles: []
})
export class MenuComponent {

  go(where){
    this.stateService.option = where;
    this.router.navigate(['characterPicking'])
  }
}

然后在您的WeaponPickingComponent中可以执行以下操作：

@Component({
  selector: 'app-weapon-picking',
  template: `
    <button (click)="next()">Next</button>
  `,
  styles: []
})
export class WeaponPickingComponent {

  next(){
    switch(this.stateService.option){
      case 'arena':
        this.router.navigate(['arena']);
        break; 
      case 'dungeon':
        this.router.navigate(['dungeon']);
        break; 
      case 'battlegroud':
        this.router.navigate(['battleground']);
        break; 
    }
  }
}

Angular 8，如何导航到一个通用页面，然后导航到我想要的页面？

1 个答案: