离子 - 离子页面-Java 学习之路

我想在Ionic框架中创建一个类似Android片段的ui . Headers 将有按钮等具有动画 . 这就是为什么我不能使用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

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中，我只放了Test1和Test2 . 现在我有这种情况 - Headers “涵盖”其余部分 . 所以我没有看到任何文字，因为它在 Headers 下方 . 我该如何改变这种行为？

1 回答

当然 . 你可以命名为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);
   }
}

回复于 2024-05-08T12:17:16+08:00

离子 - 离子页面

1 回答

相关问题