在离子v2中如何在两个页面之间导航

Question

=======

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

下面是page1.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中导入第二个页面。您还需要导入NavControler

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

然后，在构造函数中，可以初始化NavController

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

然后声明一个函数，用于更改类中的页面，如

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

最后，在page1 html中的某个地方调用该函数。如果你有一个按钮作为例子

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

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