如何在 Ionic V2 中的两个页面之间导航

Question

=======

我现在正在从事一个离子项目，但我不知道如何在不同的页面之间导航。我试图创建一个带有离子卡的主页以将其链接到另一个页面。

---

这是页面1.html（这是主页。

<ion-navbar *navbar>
  <ion-title>首頁</ion-title>
</ion-navbar>
<ion-content class="card-background-page">
  <ion-card>
    <img src="./img/XA9YwMB9S1Ob2TmaG7cF_HomeR2.jpg" a href="/RedIce/RedIce.html"/>
    <div class="card-title">最平＄34</div>
    <div class="card-subtitle">最貴$39</div>
  </ion-card>
  <ion-card>
    <img src="./img/LmhcclbATT6LAappvguR_HomeR1.jpg"/>
      <div class="card-title">Amsterdam</div>
      <div class="card-subtitle">64 Listings</div>
   </ion-card>
   <ion-card>
     <img src="./img/8xbSvFDZRmeawq30e8sL_HomeR3.jpg"/>
     <div class="card-title">San Francisco</div>
     <div class="card-subtitle">72 Listings</div>
   </ion-card>
</ion-content>

---

这是页面1.js我不知道该怎么做才能使其能够链接到我愿意链接到的RedIce页面。

import {Page} from 'ionic-angular';
import {RedIce} from '../RedIce/RedIce'
@Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  constructor() {
  }
}

---

这是另一个页面（RedIce.html），我想通过单击第 1 页中的第一张卡片来链接到该页面.html

<ion-navbar *navbar>
  <ion-title>
紅磡冰室
  </ion-title>
</ion-navbar>
<ion-content class="紅磡冰室">
 <div>
 <table>
  <tr>
<td class='left'>特餐:</td>
<td class='right'>$34</td>
  </tr>
  </table>

  <p><Lunch1>-露汁叉燒通心紛</Lunch1></p>
  <p><Lunch1>-西煎雙蛋戴嫩湯炒州</Lunch1></p>
  <p><Lunch1>-牛油多士或香烤蒜蓉包</Lunch1></p>

   <table>
   <tr>
    <td class='left'>常餐A:</td>
    <td class='right'>$39</td>
   </tr>
   </table>

  <p><Lunch1>-蕃茄濃湯鮮牛肉通心粉</Lunch1></p>
  <p><Lunch1>-西煎雙蛋或嫩滑炒蛋</Lunch1></p>
  <p><Lunch1>-牛油多士或香烤蒜容包</Lunch1></p>

  <table>
  <tr>
    <td class='left'>常餐B:</td>
    <td class='right'>$39</td>
  </tr>
  </table>

  <p><Lunch1>-瑞士雞翼或香煎豬扒𤏪公仔麵</Lunch1></p>
  <p><Lunch1>-配西煎雙蛋或嫩滑炒蛋</Lunch1></p>   
  <p><Lunch1>-牛油多士或香烤蒜容包</Lunch1></p>
 </ion-content>
</div>
</ion-content>

---

希望你们都能理解我的问题，如果需要任何文件，请通知我，我稍后会添加它。最后感谢您的帮助。

Answer 1

这基本上是你需要在这里做的

在页面1.ts中导入您的第二个页面。您还需要导入导航控制器

import {NavController} from 'ionic-angular';
import {Page2} from 'urlHere';

然后在构造函数中，您可以初始化导航控制器

export class Page1 {
  constructor(public nav: NavController) {
      this.nav = nav;
  }
}

然后声明一个函数，您将使用它来更改类中的页面，例如

public changePage() {
   this.nav.push(Page2);
}

最后，你在Page1 HTML中的某个地方调用该函数。如果你有一个示例按钮

<button (click)="changePage()"></button>

希望一切都清楚。该链接可能会更好，但这是该怎么做的快速概述！