javascript - Angular 8，如何导航到公共(public)页面，然后导航到我想要的页面？

Question

我是前端开发新手。假设我有一个菜单页面，其中有 3 个选项可供导航:

1. 前往竞技场。
2. 前往地牢。
3. 前往战场。

但是，如果我单击这 3 个选项中的任何一个，我将跳转到一个公共(public)页面，假设它是字符选择:

/Angular 色选择

如果我们完成选择并单击“下一步”，我们将导航到武器选择:

/武器选择

最后我们会跳转到我们想要的页面:

/arena、/dungeon 或/battleground

{ 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: ''},

如果上面是我的路由路径。如您所见， Angular 色选择和武器选择是常见的组件。如果我将路径/characterPicking 绑定(bind)到菜单页面上的 3 个选项。并将/weaponPicking绑定(bind)到characterPicking页面的Next Button。那么如何绑定(bind)武器选择页面的下一个按钮的路径，如何让武器选择页面知道下一步该去哪一个页面呢？竞技场/地下城/战场？

我希望我解释清楚了..

Answer 1

好吧，您有三个按钮，但它们都导航到相同的路径“/characterPicking”。我认为您应该在导航之前管理按钮单击并存储用户按下的按钮。然后用户选择他的 Angular 色并导航到“/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; 
    }
  }
}