Ionic Seiten - wechselnde Inhalt

Question

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); 
    } 

} 

In HomePage und NochNeSeite Ich habe nur <ion-content>Test1</ion-content> und <ion-content>Test2</ion-content>. Jetzt habe ich diese Situation - der Header "deckt" den Rest. Ich sehe also keinen Text, weil er unterhalb der Kopfzeile liegt. Wie kann ich dieses Verhalten ändern? Und ich möchte auch eine statische unbewegliche Kopfzeile/navbar verwenden (weil es eine Animation geben würde). Inhalte, die geändert werden können, befinden sich unter dieser Kopfzeile/navbar.

Answer 1

Versuchen Sie, die ion-nav in die ion-content zu verschieben, damit sie sich korrekt verhalten sollte.