Question

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

Answer 1

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

Answer 2

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

这是一个有效的例子。在相关的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事件，您可以使用任何您想要的事件。主要的是您导航控制器已导入并在构造函数中注入，如上所示，您还有要导航到导入的页面，并且您只使用导航控制器来推送要导航到的页面

Answer 3

您还可以使用角度为您执行此操作：

<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

Answer 4

对于Ionic 5-以下代码适用于我， Ionic 5 + Angular 9 组合，

第1步-在html文件中，添加代码以“定义”函数

<ion-button (click)="gotoHomePage()">Go to Homepage</ion-button>

第2步-在类的构造函数中，您可以注入NavController-注入NavController将始终为您提供最接近的NavController的实例，无论是否它是Tab或Nav。

constructor(public navCtrl: NavController) { }

第3步-在组件的TS文件中，添加单击离子按钮时要调用的方法，

gotoHomePage() {
    this.navCtrl.navigateForward('home');
  }

在app-routing.module.ts文件中定义了“家”路线，如下所示，

{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },

Answer 5

您可以使用以下简单方法：

 <ion-button routerLink="/myPageName" routerDirection="root">
 Go to myPageName!
 </ion-button>

Answer 6

您可以拨打这样的路线。

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

Answer 7

html

    max = datetime.datetime(2011,1,1)
    for i in mylist:
        if row[i] < row['date1']
             if row[i] > max:
                  max = row[i]

ts

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

Answer 8

我尝试过的许多解决方案都行不通，但是下面的解决方案对我有用。

要从主页转到另一个页面，只需观看以下视频： https://www.youtube.com/watch?v=paRZyKDHPak

在home.page.ts文件中添加

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

设置构造函数

constructor(public router:Router) {}

创建函数

redirectToOther(){
    this.router.navigateByUrl('other');
 }

你们可以添加“返回按钮”以返回首页，只需在other.page.html中添加此HMTL代码即可，

<ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>

Answer 9

这就是我用的

 <ion-nav-buttons side="right" >
        <a href="templates/yourpage.html">
        <button class="button">
            Show your page
        </button>
        </a>
    </ion-nav-buttons>

Answer 10

将按钮放在锚标记内。

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

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

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

10 个答案: