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>

这是page1.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中的第一张卡链接到该页面.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

这基本上是你需要做的here

在page1.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>

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

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

1 个答案: