Angular 8, как перейти на общую страницу, затем перейти к моей желаемой паг? - PullRequest
Новая
       6

Angular 8, как перейти на общую страницу, затем перейти к моей желаемой паг?

0 голосов
/ 17 февраля 2020

Я новичок в разработке переднего плана. Представьте, что у меня есть страница меню с 3 вариантами навигации:

  1. Go на арену.
  2. Go на подземелье.
  3. Go на поле битвы.

Но если я нажму любой из этих 3 вариантов, я перейду на общую страницу, скажем, это выбор персонажа:

/ CharacterPicking

Если мы закончили выбор и щелкнули далее, перейдем к выбору оружия:

/ WeaponePicking

После этого мы наконец перейдем к странице, которую хотим:

/ arena, / подземелье или / поле битвы 

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

Если выше - мой путь разгрома. Как вы можете видеть, выбор персонажа и оружие являются общими компонентами. Если я связываю путь / характер, выбирая 3 варианта на странице меню. И привязка / оружие Нажатие на кнопку Далее на странице персонажа. Тогда как связать путь для кнопки «Далее» на странице выбора оружия, как дать странице выбора оружия знать, какая страница должна быть go следующей? Арена / Подземелье / BattleGround?

Надеюсь, я объяснил это ясно ..

1 Ответ

1 голос
/ 17 февраля 2020

Хорошо, у вас есть три кнопки, но все они перемещаются по одному и тому же пути «/ 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'])
  }
}

И тогда в вашем оружейном компоненте можно сделать что-то вроде этого: 

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