如何使用离子点击按钮进入另一个页面？

Question

我一直在尝试使用代码,我添加了按钮但是我不知道如何在点击它时将它链接到另一个页面.

Answer 1

HTML:

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

要么

 <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);
}

Answer 2

html

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

ts

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


constructor(private route: Router) { }

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

Answer 3

导航在 ionic 中的工作方式不同，不建议简单地使用锚标记和文件路径。

这是一个有效的例子。在相关的 TS 文件中，导入您想要导航到的页面

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

确保您已将导航控制器导入并注入到当前 TS 文件的构造函数中。如果您不确定，它应该如下所示。

import { NavController } from "ionic-angular";

然后在构造函数中

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

}

导入导航控制器和页面后，您可以继续创建这样的功能

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>

您不一定必须使用 click 事件，您可以使用任何您想要的事件。主要的事情是你有导航控制器导入并注入到你的构造函数中，如上所示，你有你想要导航到的页面（s）导入以及你只使用导航控制器来推送你想要导航到的页面.

Answer 4

将按钮放置在锚标记内。

 <a href="path of the file"><button>Name</button></a>

您也可以参考此链接：http ://www.w3schools.com/tags/tag_a.asp