我想在Ionic Framework中创建一个类似Android Fragments的UI,头部会有按钮等有动画的东西。这就是为什么我不能使用 navctrl.push
或 navctrl.setroot
. 我只需要修改 ion-content
(MainPage),并加载一个新的页面,该页面只包含了 ion-content
.下面是一张图片,介绍我想怎么做。
有没有可能做到呢?
app.html
<ion-header>
<ion-navbar>
<ion-title>Blabla</ion-title>
<button ion-button color="primary" (click)="home()">Home</button>
<button ion-button color="primary" (click)="second()">Second</button>
</ion-navbar>
</ion-header>
<ion-content>
</ion-content>
<ion-nav #myNav [root]="rootPage"></ion-nav>
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { SecondpagePage } from '../pages/secondpage/secondpage';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild('myNav') nav: NavController;
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
home() {
this.nav.setRoot(HomePage);
}
second() {
this.nav.setRoot(SecondpagePage);
}
}
在 HomePage
和 SecondPage
我只把 <ion-content>Test1</ion-content>
和 <ion-content>Test2</ion-content>
.现在我遇到了这种情况--页眉 "覆盖 "了其余部分。所以我看不到任何文字,因为它在页眉下面。我怎样才能改变这种行为?
当然,你可以用命名 导航仪
app.component.ts
import {MainPage} from 'main'
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
// First page to push onto the stack
rootPage = MainPage;
}
main.component.ts
import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
template: `
<ion-header>{{ YOUR HEADER }}</ion-header>
<ion-content>
<ion-nav #yourNav [root]="rootPage"></ion-nav>
</ion-content>
`
})
export class MainPage {
@ViewChild('yourNav') nav: NavController
public rootPage: any = StartPage;
public goSomeWhere() {
this.nav.push(SomeWhere);
}
public goSomeWhereElse() {
this.nav.push(SomeWhereElse);
}
}