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

Question

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

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

但是，如果我单击这 3 个选项中的任何一个，我将跳转到一个通用页面，假设它是字符选择：

/字符拾取

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

/武器拾取

之后，最后我们将跳转到所需的页面：

/竞技场、/地牢或/战场

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

如果以上是我的徘徊路径。如您所见，角色拾取和武器拾取是常见的组件。如果我将路径/characterPick 绑定到菜单页面上的 3 个选项。并将/weaponPick 绑定到角色拾取页面上的下一步按钮。 那么如何绑定武器拾取页面上下一个按钮的路径，如何让武器拾取页面知道下一步应该去哪个页面？竞技场/地牢/战场？

我希望我解释清楚这一点..

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; 
}
}
}