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