2016-06-01 9 views
0

=======wie zwischen zwei Seiten in ionischen v2

Ich bin jetzt arbeitet an einem ionischen Projekt zu navigieren, aber ich weiß nicht, wie zwischen den verschiedenen Seiten zu navigieren. Ich habe versucht, eine Hauptseite mit ionischer Karte zu erstellen, um sie mit einer anderen Seite zu verknüpfen.


geht hier die page1.html (die die Haupt Seite.)

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

Das sind die page1.js ist, die ich weiß nicht, wie es in der Lage zu tun, um zu verknüpfen auf der RedIce-Seite, mit der ich verlinken wollte.

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

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

und das ist die andere Seite (RedIce.html), die ich verknüpfen möchte, indem Sie die erste Karte in Seite 1.html klicken

<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 alle können meine Frage verstehen und wenn es irgendeine Datei benötigt, bitte beachten Sie mich und ich werde es später hinzufügen. Zuletzt danke für Ihre Hilfe.

Antwort

1

das ist im Grunde, was Sie here

importieren Sie Ihre zweite Seite in Ihrem page1.ts tun müssen. Sie müssen auch auch

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

dann im Konstruktor importieren NavControler können Sie die NavController initialisieren

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

dann eine Funktion erklären, dass Sie gonna verwenden ändern Seite in der Klasse wie

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

schließlich rufen Sie die Funktion irgendwo in Ihrer Seite1 html. Wenn Sie eine Taste für Beispiel hatten

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

Ich hoffe, es ist alles klar. Der Link könnte besser sein, aber das ist ein kurzer Überblick darüber, was zu tun ist!

+0

Danke, ich würde mir das mal anschauen und es versuchen XD –

Verwandte Themen