如何在特定页面上隐藏离子选项卡

时间:2019-01-03 16:09:11

标签: android angular ionic-framework tabs hide

我想在我的离子Angular应用程序的2页中隐藏或除去离子选项卡,并将其保留在其他页面上。我试图动态更改rootPage,但是没有用。我正在使用Ionic 3.9.2和Angular5。如何仅在特定页面中隐藏这些选项卡?预先感谢!

A page where I want to remove the tabs


app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { AuthService } from '../services/auth.service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  public rootPage: any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private authService: AuthService) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

app.html

<ion-nav [root]="rootPage" #content></ion-nav>

connexion.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Connexion
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding >
  <form #f="ngForm" (ngSubmit)="validerConnexion(f)">
    <ion-item>
      <ion-label color="primary" floating>Adresse mail</ion-label>
      <ion-input [(ngModel)]="email" type="email" name="email" required clearInput="true"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary" floating>Mot de passe</ion-label>
      <ion-input [(ngModel)]="motDePasse" type="password" name="motDePasse" required></ion-input>
    </ion-item>

    <br>

    <button type="submit" ion-button round outline block [disabled]="f.invalid">Se connecter</button>
  </form>

  <button ion-button round outline block type="button" (click)="allerInscription()">S'inscrire</button>
</ion-content>

tabs.ts

import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { ListeGainsPage } from '../listeGains/listeGains';
import { ListeDepensesPage } from '../listeDepenses/listeDepenses';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  homePage = HomePage;
  listeGainsPage = ListeGainsPage;
  listeDepensesPage = ListeDepensesPage;
}

tabs.html

<ion-tabs>
  <ion-tab [root]="homePage" tabIcon="home"></ion-tab>
  <ion-tab [root]="listeGainsPage" tabIcon="add"></ion-tab>
  <ion-tab [root]="listeDepensesPage" tabIcon="remove"></ion-tab>
</ion-tabs>

0 个答案:

没有答案