web-dev-qa-db-fra.com

Comment utiliser le routage dans IONIC 3

Je développe une application Ionic 3. En ce moment, j’utilise NavController pour le routage et le changement de page.

Ex: this.navCtrl.Push(DetailsPage);

Mais je dois utiliser le routage Angular maintenant. 

J'ai trouvé similaire question pour Ionic 2, mais cela fonctionne-t-il également dans Ionic 3?

Quelqu'un peut-il élaborer ceci?

angularionic-frameworkionic3
2
Sangwin Gawande

Vérifiez ce lien pour le détail de navcontroll link . que vous devez importer dans votre fichier ts actuel. suivi de: =>

nous pouvons utiliser la navigation ionique de deux manières différentes: 

1) DeepLink

2) composant de navigation stak 

DeepLink

la navigation deeplink agit comme la navigation de page Web comme ci-dessous exaple vous devez utiliser @ionicpage anotation pour pouvoir utiliser la navigation deeplink

https: // locallhost: 8000/#/HomePage/SecondPage

Navigation dans les composants

Vous devez importer votre composant dans le fichier ts respecté pour pouvoir naviguer

Au total, il y a trois mots clés Push, pop, setRoot.

  1. setRoot

    Exemple : 

    this.navCtrl.setRoot (HomePage); 

    (ou) 

    this.navCtrl.setRoot ("HomePage"); // navigation DeepLink

    Utilisé pour transformer le composant en page racine, autrement dit, il crée une pile de navigation vide où page d'accueil est la racine.

  2. Push

    Exemple:

    this.navCtrl.Push (SecondPage); 

    (ou) 

    this.navCtrl.Push ("SecondPage"); // navigation DeepLink

    l'exemple ci-dessus contient le mot-clé Push où la pile de navigation a un composant à l'intérieur de la pile, suivi de Homepage.i signifie qu'après le composant de page d'accueil, vous aurez un composant de deuxième page dans la pile de navigation.

3. pop

Exemple:

this.navCtrl.pop (); 

(ou)

this.navCtrl.pop (); // navigation DeepLink

Considérez que vous êtes en seconde page maintenant et que vous vouliez revenir à la page précédente qui est la page d’accueil, puis utilisez l’exemple ci-dessus: un composant sera extrait de la pile de navigation et ne vous indiquera que le composant de page d’accueil.

4
Mohan Gopi

Vous pouvez utiliser Ionic deep links pour cela.

Exemple tiré de la doc:

@IonicPage({
  name: 'my-page',
  segment: 'some-path'
})

Lorsque vous accédez à cette page en tant que première page de l'application, l'URL ressemblera à ceci:

http://localhost:8101/#/some-path

Bon article à ce sujet: Lien vers des pages via des URL avec Deep Linking in Ionic

2
Sampath

Nous utilisons principalement 3 choses

  1. this.navCtrl.Push ("pageName")
  2. this.navCtrl.pop ("pageName")
  3. this.navCrl.setRoot ("pageName")
0
EDISON J

Nous utilisons principalement le routage de navigation fourni par Ionic 3. Vous devez préférer:

  1. this.navCtrl.Push("pagename")
  2. this.navCtrl.pop("pagename")
  3. this.navCtrl.setRoot("pagename")

De plus, si vous recherchez TabsModule of Ionic 3, utilisez:

  1. this.navCtrl.parent.select(tab or index)
0
kartik goyal