Ionic 4 setRoot avec Angular Router

Question

Je suis en train de mettre à jour mon projet Ionic 3 vers la dernière version Ionic 4 et j'ai quelques problèmes avec le routage. Dans Ionic 3, j'utilisais setRoot comme ceci :

handler: () => navCtrl.parent.parent.setRoot(HomePage, 'logout', {animate: true})

Le dernier navCtrl de Ionic 4 n'a que goBack, goForward et goRoot, et je ne comprends pas comment utiliser parent. J'ai trouvé ActivatedRoute dans Angular, mais je ne pense pas que ce soit la bonne méthode. Comment puis-je faire ?

Answer 1

D'une manière générale, et en citant cet article génial sur ce sujet par Josh Morony :

Dans Ionic 4 avec le routage Angular, il n'y a pas de page racine à définir.

Comme Ionic 4 s'appuie sur le routeur d'Angular, le NavController a été modifié pour refléter cette nouvelle réalité, et pour une application Angular, il n'existe pas de route "racine". Vous faites simplement la transition entre les routes et le framework fait le reste du travail.

D'une manière générale, les méthodes navigateRoot , navigateBackward y navigateForward ne sont là que pour indiquer à Ionic comment traiter les animations. Vous pouvez donc utiliser navigateRoot dans Ionic 4 pour accomplir la même chose que ce que vous avez utilisé setRoot sur Ionic 3.

Je vous recommande fortement de lire l'article mentionné ci-dessus, il couvre une grande partie de ce que vous devez savoir pour migrer vos routes de la version 3 à la version 4 de Ionic.

Answer 2

Avec @angular/router, une façon d'obtenir le comportement que vous attendez est d'utiliser replaceUrl et skipLocationChange des NavigationExtras. ici sur les documents officiels Le code serait quelque chose comme ceci :

this.router.navigate([pageLink], {replaceUrl: true})

Mais oui, la référence navigateRoot n'existe pas sur @angular/router comme elle l'était sur ionic 3.

Answer 3

Pour que votre page soit définie comme la page racine dans Ionic 4, vous devez utiliser les éléments suivants navigateRoot au lieu de setRoot

this.navCtrl.navigateRoot('/pageName');

Answer 4

Vous pouvez setRoot sans utiliser le routeur d'Angular. Ce code fonctionne dans Ionic 4

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) { 

}

---

naviguerRoot()

navigateRoot ( url : string | UrlTree | any[], options ? : NavigationOptions) : Promise ;

 this.navCtrl.navigateRoot('/app/profile');

ou si vous voulez forward/back l'animation :

this.navCtrl.navigateRoot('/authentication', { animationDirection: 'forward' });

---

setDirection() avec le routeur d'angular

setDirection ( direction : RouterDirection, animé ? : booléen, animationDirection ? : 'forward' | 'back') : void ;

avec la navigation :

this.navCtrl.setDirection('root');
this.router.navigate(['/app/profile']); 

avec navigateByUrl :

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/app/profile');

ou la directive using :

<a routerLink="/app/profile" routerDirection="root">Proceed</a>