Ionic - Ionic Pages

Question

Ich möchte ein ii im ionischen Framework Art von Android-Fragmente erstellen. Header wird Tasten usw. mit Animationen haben. Deshalb kann ich navctrl.push oder navctrl.setroot nicht verwenden. Ich muss nur den Inhalt des Ioneninhalts (MainPage) ändern und eine neue Seite laden, die nur den Ionengehalt enthält. Unten ist ein Bild, das zeigt, wie ich es gerne machen würde.

Gibt es irgendwelche Möglichkeiten, es zu tun?

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 habe ich nur Test1 und Test2. 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?

Answer 1

Sicher. Sie haben können NavControllers

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