이오닉 이오 페이지

Question

이오닉 프레임 워크에서 Android Fragments를 만들고 싶습니다. 헤더에는 애니메이션이있는 버튼 등이 있습니다. 그래서 navctrl.push 나 navctrl.setroot를 사용할 수 없습니다. 이온 함유량 (MainPage)의 내용 만 바꾸고 이온 함유량 만 포함하는 새로운 페이지를로드해야합니다. 다음은 내가 어떻게하고 싶은지 보여주는 그림입니다.

어떤 가능성이 있습니까?

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 홈페이지 및 SecondPage에서

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

} 

나는 단지에서 Test1 및 Test2를 넣어. 이제 그 상황이 있습니다. 헤더가 나머지를 "덮습니다". 헤더 아래에 있으므로 텍스트가 표시되지 않습니다. 어떻게 그 행동을 바꿀 수 있습니까?

Answer 1

확실히. 당신은

NavControllers 그것은 navroot의 자식으로 새 페이지가 열립니다

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