Angular 8、如何导航到一个公共页面，然后导航到我想要的页面？

Question

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

去竞技场。
前往地下城。
前往战场。

但是如果我点击这 3 个选项中的任何一个，我将跳转到一个公共页面，假设它是角色选择：

/characterPicking

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

/武器选择

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

/竞技场、/地下城或/战场

{ 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 绑定到角色选择页面上的下一步按钮。那么如何在武器选择页面绑定Next Button的路径，如何让武器选择页面知道下一步应该去哪个页面呢？ Arena/Dungeon/BattleGround ?

我希望我解释清楚了..

Answer 1

好的，您有三个按钮，但它们都导航到同一路径“/characterPicking”。我认为您应该在导航和存储用户按下的哪个按钮之前管理按钮点击。然后用户选择他的角色并导航到“/weaponPicking”，当他按下最后一个 next 按钮时，您应该阅读该选项并导航到 'arena'、'dungeon' 或 'battleground' 之间的正确路径.

我认为是这样的：

@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、如何导航到一个公共页面，然后导航到我想要的页面？

Angular 8, How to navigate to a common page, then navigate to my desired pag?

javascript

angular

angular-ui-router

frontend