CODEWITHSUNDEEP
ionic2
Tsz Fung Ng
Tsz Fung Ng

Reputation: 1

how to navigate between two pages in ionic v2

=======

I am now working on an ionic project, but i don't know how to navigate between different pages. I was trying to create a main page with ionic card to link it to another page.

Here goes the page1.html (which is the main page.)

<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>

This is the page1.js which i dont know how to do to make it able to link to the RedIce page which i were willing to link to.

import {Page} from 'ionic-angular';
import {RedIce} from '../RedIce/RedIce'

@Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  constructor() {
  }
}

and this is the other page(RedIce.html) which i would like to link to by clicking the first card in page 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>

Hope you all can understand my question and if there is any file needed please notice me and i will add it later on. Lastly thank you for your help.

Upvotes: 0

Views: 1683

Answers (1)

theyouishere
theyouishere

Reputation: 177

this is basically what you need to do here

import your second page in your page1.ts. You also need to import NavControler as well

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

then in the constructor you can initialize the NavController

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

then declare a function that you are gonna use to change page in your class like

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

finally you call the function somewhere in your page1 html. If you had a button for exemple

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

Hope it's all clear. The link might be better but this is a quick overview of what to do !

Upvotes: 1

Related Questions