我正在使用Ionic创建应用程序,我正在尝试创建导航器和推送页面。 这是我的代码。
list.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Paises</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card *ngFor="let pais of paises | async"
(click)="cambiarPagina()">
<ion-item>
<ion-avatar item-start>
<img src="{{pais.bandera}}">
</ion-avatar>
<h2>{{pais.nombre}}</h2>
<p>Su nivel en el ranking de la FIFA es: {{pais.ranking}}</p>
</ion-item>
</ion-card>
</ion-content>
这是我的list.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { AngularFireList } from 'angularfire2/database';
import { AboutPage } from '../about/about';
@Component({
selector: 'page-list',
templateUrl: 'list.html'
})
export class ListPage {
pais: AngularFireList<any>
paises: Observable<any[]>
constructor(public navCtrl: NavController, public navParams:
NavParams, public db: AngularFireDatabase) {
// If we navigated to this page, we will have an item available as a
nav param
this.paises = db.list('paises').valueChanges();
}
cambiarPagina(){
this.navCtrl.push(AboutPage);
}
}
这是我的about.html
<ion-content padding class="about">
This is my super awesome about page.
</ion-content>
这是我得到的例子
答案 0 :(得分:2)
您的modified
中没有<ion-navbar></ion-navbar>
,后退按钮属于它,请尝试将其添加到您的about.html