我的代码存在问题。无法从主页导航到例如关于页面。该应用是在离子框架中。这项技术完全是新的。在控制台没有警告和错误。 home.ts
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>
答案 0 :(得分:2)
一种可行且简单的解决方案是点击按钮的呼叫方法。正如您在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>