web-dev-qa-db-fra.com

Comment passer d'une page à une autre en ionic 4?

Je suis débutant en Ionic et ceci est ma première démo.

Je veux passer d'une page à une autre et pour cela j'ai écrit ci-dessous le code dans home.page.html fichier.

<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
    <ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>

Ci-dessous est home.page.ts code de fichier.

export class HomePage {

  constructor(public navController: NavController) {

  }

  goToLoginPage(){
    this.navController.navigateForward(LoginVCPage) // Getting error at this line.
  }
}

Voici une capture d'écran d'erreur.

enter image description here

Toute aide serait appréciée

ionic-frameworkionic4
3
Kuldeep

In Ionic 4 using NavController est obsolète. Voir cette déclaration dans le Guide de migration :

En V4, la navigation a reçu le plus de changements. Maintenant, au lieu d'utiliser le propre NavController d'Ionic, nous intégrons le routeur officiel Angular.

Angular gère ses routes dans un fichier séparé, dans Ionic 4 ce fichier est nommé app-routing.module.ts. Chaque fois que vous créez une nouvelle page à l'aide de ionic g page pagename la CLI créera automatiquement une nouvelle entrée dans le tableau routes dans app-routing.module.ts.

Donc, en supposant que vous avez créé une page de test et que vous disposez désormais des itinéraires suivants dans app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'test', loadChildren: './test/test.module#TestPageModule' },
];

Vous pouvez passer à une autre page en ajoutant une propriété href à votre bouton avec le chemin d'accès correspondant (par exemple '/test') à la page vers laquelle vous souhaitez vous déplacer:

<ion-button href="/test">Move to test page</ion-button>

Vous pouvez également utiliser la directive routerLink comme indiqué ici :

<ion-button [routerLink]="['/test']">Move to test page</ion-button>

Si vous voulez/devez naviguer par programme, vous devrez injecter le service de routeur dans votre page/composant et appeler navigateByUrl comme ceci:

constructor(private router: Router) { }

goToTestPage() {
    this.router.navigateByUrl('/test');
}

Voir également les Angular docs on routing et les Ionic v4 docs sur ce sujet.

9
Phonolog

Pour compléter la réponse de @Phonolog, vous devez également utiliser routerDirection="forward" ou quelle que soit la direction.

0
alex87