it-swarm.com.de

wie gehe ich mit einem Klick auf eine andere Seite mit ionisch?

Ich habe versucht, mit dem Code zu arbeiten, ich habe die Schaltfläche hinzugefügt, aber ich weiß nicht, wie ich ihn mit einer anderen Seite verknüpfen soll, wenn Sie darauf klicken. 

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>

in TS:

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


anOtherPage: AnOtherPage;

 constructor(public navCtrl: NavController) {}

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

Die Navigation funktioniert in ionisch anders und es wird nicht empfohlen, einfach ein Ankertag und den Pfad zur Datei zu verwenden.

Hier ist ein Beispiel, das funktioniert. Importieren Sie in der entsprechenden TS-Datei die Seite (n), zu der Sie gerne navigieren möchten

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

Stellen Sie sicher, dass der Navigationscontroller importiert und in den Konstruktor Ihrer aktuellen TS-Datei eingefügt wurde. Es sollte wie folgt aussehen, falls Sie sich nicht sicher sind.

import { NavController } from "ionic-angular";

Dann im Konstruktor

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

}

Nachdem Sie den Navigationscontroller und die Seite (n) importiert haben, können Sie mit dem Erstellen einer Funktion fortfahren

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

Damit ist das Navigations-Setup für Ihre TS-Datei abgeschlossen. Nun wechseln Sie zu der entsprechenden Vorlage, von der aus Sie navigieren möchten, und Sie können beliebige Tags verwenden, die Sie zum Beispiel verwenden möchten

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

oder Sie können a, span oder div auf ähnliche Weise verwenden

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

Sie müssen nicht unbedingt das Click-Ereignis verwenden, das Sie verwenden können, und zwar unabhängig davon, welches Ereignis Sie möchten. Die Hauptsache ist, dass Sie den Navigationscontroller importiert und in Ihren Konstruktor eingefügt haben, wie oben gezeigt, und Sie haben die Seite (n), zu der Sie navigieren möchten, ebenfalls importiert, und Sie verwenden den Navigationscontroller nur für Push-Seiten, zu denen Sie navigieren möchten .

3
Francis Benyah

sie können angle auch dazu verwenden:

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

Sie müssten einen Controller haben und doSomething () definieren.

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

Wenn Sie Ihren Status ändern mussten, fügen Sie $ state in Ihren Controller ein und verwenden Sie $ state.go (stateName).

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

1
LostJon

Sie können eine Route wie diese aufrufen.

<button onclick="location.href='/pageToRoute/param'" block>
</button>
0

html

<ion-button (click)="nextpage()">Home</ion-button>

ts


import { Router } from '@angular/router';


constructor(private route: Router) { }

  nextpage() {
    this.route.navigate(['/home']);
  }
0
O.Moloi