web-dev-qa-db-fra.com

comment aller à une autre page avec un clic de bouton avec ionique?

J'ai essayé de travailler avec le code, j'ai ajouté le bouton mais je ne sais pas comment le lier à une autre page en cliquant dessus. 

buttonionic-frameworknavigation
7
Bashayr

html: 

 <ion-buttons>
   <button ion-button (click)="goAnOtherPage()">Go an Other Page </button>
 </ion-buttons>

OR

 <ion-label  [navPush]="anOtherPage">Go an Other Page</ion-label>

en TS:

import { NavController } from 'ionic-angular';
import { AnOtherPage } from '/anOtherPage';


anOtherPage: AnOtherPage;

 constructor(public navCtrl: NavController) {}

goAnOtherPage() {
  this.navCtrl.setRoot(anOtherPage);
}
9
Gurbela

La navigation fonctionne différemment dans ionic et il est déconseillé d'utiliser simplement une balise d'ancrage et le chemin d'accès au fichier.

Voici un exemple qui fonctionne. Dans le fichier TS approprié, importez la ou les pages auxquelles vous souhaitez accéder,

import { OtherPage} from "../pagefolder/pagecontroler";
import { YetAnotherPage} from "../pagefolder/pagecontroler";

Assurez-vous que le contrôleur de navigation est importé et injecté dans le constructeur de votre fichier TS actuel. Cela devrait ressembler à ce qui suit au cas où vous n'êtes pas sûr.

import { NavController } from "ionic-angular";

Puis en constructeur

constructor(public navCtrl: NavController, .....) {

}

Une fois que vous avez le contrôleur de navigation et la ou les pages importées, vous pouvez créer une fonction telle que

navigateToOtherPage(): void {
   this.navCtrl.Push(OtherPage);
}

Ceci termine la configuration de la navigation pour votre fichier TS . Maintenant, vous allez au modèle approprié à partir duquel vous voulez naviguer et vous pouvez utiliser les tags de votre choix, par exemple

<button (click)="navigateToOtherPage()">Next Page<button>

ou vous pouvez utiliser un a, un span ou un div de la même manière

<a (click)="navigateToOtherPage()">Other Page</a>
<span (click)="navigateToOtherPage()">Other Page</span>
<div (click)="navigateToOtherPage()">Other Page</div>

Vous n'êtes pas obligé d'utiliser l'événement click, vous pouvez utiliser l'événement que vous voulez. L'essentiel est que le contrôleur de navigation soit importé et injecté dans votre constructeur, comme indiqué ci-dessus, que vous ayez également la ou les pages sur lesquelles vous souhaitez naviguer et que vous n'utilisiez le contrôleur de navigation que pour pousser les pages vers lesquelles vous souhaitez naviguer .

3
Francis Benyah

vous pouvez aussi utiliser angular pour le faire pour vous:

<button ng-click="doSomething(withSomebody)"> Submit
</button>

Vous devez disposer d’un contrôleur pour définir do quelque chose ()

$scope.doSomething=function(somebody){
    ...insert code here
}

Si vous deviez changer votre état, injectez $ state dans votre contrôleur et utilisez $ state.go (stateName)

ref: https://github.com/angular-ui/ui-router/wiki

1
LostJon