web-dev-qa-db-ja.com

イオンでボタンをクリックして別のページに移動する方法は？

私はコードを操作しようとしており、ボタンを追加しましたが、クリックしたときに別のページにリンクする方法がわかりません。

buttonionic-frameworknavigation
8
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>

tSで：

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


anOtherPage: AnOtherPage;

 constructor(public navCtrl: NavController) {}

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

ionicではナビゲーションが異なるため、単にアンカータグとファイルへのパスを使用することはお勧めしません。

動作する例を次に示します。関連するTSファイルで、ナビゲートしたいページをインポートします

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

Navigation Controllerがインポートされ、現在のTSファイルのコンストラクタに挿入されていることを確認してください。不明な場合は、次のようになります。

import { NavController } from "ionic-angular";

その後、コンストラクターで

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

}

Navigation Controllerとページをインポートしたら、次のような関数の作成に進むことができます

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

これで、TSファイルのナビゲーション設定が完了しました。これで、ナビゲートしたい関連テンプレートに移動し、たとえば必要なタグを使用できます

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

または、a、span、またはdivを同様の方法で使用できます

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

クリックイベントを必ずしも使用する必要はなく、必要なイベントを使用できます。主なものは、上記のように、Navigation Controllerをコンストラクターにインポートおよびインジェクトし、ナビゲートしたいページもインポートし、Navigation Controllerを使用してナビゲートしたいページをプッシュすることです。

3
Francis Benyah

angularを使用してこれを行うこともできます：

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

doSomething（）にコントローラーを定義する必要があります。

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

状態を変更する必要がある場合は、コントローラーに$ stateを挿入し、$ state.go（stateName）を使用します

参照： https://github.com/angular-ui/ui-router/wiki

1
LostJon

このようなルートを呼び出すことができます。

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

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