navCtrl導航到下一頁離子

我的代碼存在一些問題。無法從主頁導航到例如關於頁面。該應用程序在離子框架中。這項技術完全是新的。在控制檯中沒有警告和錯誤。 home.tsnavCtrl導航到下一頁離子

import { Component } from '@angular/core'; 
import { NavController, IonicPage } from 'ionic-angular'; 
import { Auth } from '@ionic/cloud-angular'; 
import { User } from '@ionic/cloud-angular'; 
import { LoginPage } from '../login/login'; 
import { About } from '../about/about'; 
import { ChatPage } from '../chat/chat'; 

@IonicPage() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    constructor(public navCtrl: NavController, public auth: Auth, public user: User) { 
    console.log(user); 
    } 

    logout() { 
     this.auth.logout(); 
     this.navCtrl.setRoot(LoginPage); 
    } 

    about(){ 
     this.navCtrl.setRoot(About); 
    } 

    chat(){ 
     this.navCtrl.setRoot(ChatPage); 
    } 
}

home.html做爲

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Home 
    </ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="logout()"> 
     <ion-icon name="exit"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h2>Welcome back, {{ user.details.name }}</h2> 
    <p> 
    <button ion-button color="secondary" block>Something</button> 
    </p> 
    <p> 
    <button ion-button color="secondary" block [navPush]="ChatPage">Chat</button> 
    </p> 
    <p> 
    <button ion-button color="secondary" block [navPush]="About">About</button> 
    </p> 
</ion-content>

about.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

@IonicPage() 
@Component({ 
    selector: 'page-about', 
    templateUrl: 'about.html', 
}) 
export class About { 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad About'); 
    } 

}

about.html

<ion-header> 

    <ion-navbar> 
    <ion-title>about</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding class="about"> 
    This is my super awesome about page. 
</ion-content>

來源

2017-06-14 Karolina Bagrowska

一種可能的和簡單的解決方案是呼叫的方法上點擊按鈕。當您在home.ts中定義about()方法時，現在只需單擊按鈕即可調用此方法。只是更新home.html代碼

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Home 
    </ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="logout()"> 
     <ion-icon name="exit"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h2>Welcome back, {{ user.details.name }}</h2> 
    <p> 
    <button ion-button color="secondary" block>Something</button> 
    </p> 
    <p> 
    <button ion-button color="secondary" block (click)="chat()">Chat</button> 
    </p> 
    <p> 
    <button ion-button color="secondary" block (click)="about()">About</button> 
    </p> 
</ion-content>

來源

2017-06-14 12:10:02 Khurram

謝謝！它有助於如何做回覆點擊主頁？從約和聊天 –

@KarolinaBagrowska請不要擴大您的問題後，它已發佈。如果您的問題已被回答，請將其標記爲這樣，如果您需要在搜索中找不到的其他幫助，請打開一個新問題。謝謝。 – maninak

迴歸家園。有兩種方法。首先不是將頁面和聊天頁面設置爲根頁面，而是將它們推送到當前的導航堆棧。爲此，聊天方法（home.ts）使用'this.navCtrl.push（About）;'它會將你的關於頁面的頁面推送到當前的導航堆棧並且返回按鈕將出現在關於頁面。 – Khurram

navCtrl導航到下一頁離子

回答

相關問題