web-dev-qa-db-fra.com

Ionic 4: Comment définir la direction de navigation (arrière / avant) en utilisant routerLink?

Ionic 4 utilise désormais le routeur Angular. Bien qu'il dispose toujours de son propre NavControler, ce qui permet de simuler le style de navigation Push/pop via les méthodes navigBackward et naviguerForward.

Pour que ce bouton de retour d'ion soit affiché, je pense qu'il est nécessaire d'utiliser navigForward et naviguerBackward.

Dans mon application, je préfère utiliser routerLinks pour naviguer (afin que l'utilisateur puisse ouvrir la page dans un autre onglet) au lieu de navController.

Mais avec routerLinks, le bouton de retour d'ions n'apparaît pas. Il doit y avoir un moyen de faire en sorte que routerLinks se comporte comme une navigation Push/Pop.

Comment pourrais-je simuler un événement comme naviguer vers l'avant et naviguer vers l'arrière à l'aide de routerLinks?

angular-ui-routerangular7directionionic4routerlink
5
Natanael

Passer de Ionic 3 à Ionic 4 avec navigation a beaucoup changé, mais les changements ne sont pas trop mauvais. Le Ionic Docs recommande de passer à Angular Routing au lieu du traditionnel Ionic pop and Push. Il y a plusieurs façons de router vos pages, mais Je pense que le plus simple à comprendre est d'utiliser les fonctions navigateForward() et navigateBack() dans le fichier .ts.

Ex.

navigateForward(){
    this.navCtrl.navigateForward('/route of the page you want to navigate to');
  }
<ion-button large block (click)="navigateForward()">
      Navigate Forward
</ion-button>

Bien sûr, la navigation vers l'avant et vers l'arrière est liée à la structure de la création de votre application à partir de la pile.

Le app-routing.module.ts Le fichier créera automatiquement les itinéraires pour vos pages générées, mais vous pouvez modifier manuellement les itinéraires là-bas ainsi que définir une page racine.

Une bonne référence aux tutoriels de routage ici . Montre également différentes façons de naviguer en utilisant des itinéraires dans toute votre application.

1
Stephen Romero