ログイン後イオンメニューのイオンリストを有効にする

Question

私はそのような何かをしなければならない： ログインをクリックすると、ページが表示され、データベースへの接続が確認されます。 homePageにリダイレクトされると、hidden-ion-list（）がメニューに表示されます。

import { Component } from '@angular/core'; 
 
import { NavController,MenuController ,NavParams,AlertController,LoadingController,ViewController} from 'ionic-angular'; 
 
import {Http} from "@angular/http"; 
 
import 'rxjs/add/operator/map'; 
 
import {HomePage} from '../home/home'; 
 
import { MyService } from '../../providers/my-service'; 
 
import { Storage } from '@ionic/storage'; 
 

 
@Component({ 
 
    selector: 'page-modal-page', 
 
    templateUrl: 'modal-page.html', 
 
    providers: [MyService] 
 
}) 
 
export class ModalPagePage { 
 
    data:any; 
 
ftechdata:any; 
 
    
 
    constructor(public navCtrl: NavController ,public viewCtrl:ViewController, private http:Http,private alert :AlertController,private loading:LoadingController) { 
 
    this.data={}; 
 
    this.data.username=""; 
 
    this.data.password=""; 
 
     
 
    
 
    
 
    } 
 

 
    ionViewDidLoad() { 
 
    console.log('ionViewDidLoad LoginPage'); 
 
    } 
 
login(){ 
 
let username=this.data.username; 
 
let password=this.data.password; 
 
let data =JSON.stringify({username,password}); 
 
let link="https://stationpfe.000webhostapp.com/login.php"; 
 
this.http.post(link,data) 
 
.subscribe(data=>{ 
 
let loader=this.loading.create({ 
 
content:"cheking! please wait...", 
 
    duration:1000 
 
    }); 
 
    loader.present(); 
 
    this.navCtrl.setRoot(HomePage); 
 
    // 
 
    
 
    
 
},error=>{ 
 
let alert =this.alert.create({ 
 
title:'warning', 
 
subTitle:'wrong username or password !please try agin !', 
 
buttons:['Ok'] 
 
    }); 
 
    alert.present(); 
 
}); 
 
    
 
} 
 

 
close() { 
 
    this.viewCtrl.dismiss(); // This works fine 
 
    } 
 
    showPopup(){ 
 
console.log("action sur label "); 
 
    } 
 
}

<ion-menu [content]="content" > 
 
    <ion-header> 
 
    <!--> lec hangement de couleur pour la liste des items page app.html, app.scss<--> 
 
    <ion-toolbar color="danger" > 
 
     <ion-title > MyApp </ion-title> 
 
    </ion-toolbar> 
 
    </ion-header> 
 

 
    <ion-content class="custom"> 
 
    <ion-list > 
 
     <ion-list-header> 
 
      Navigate 
 
     </ion-list-header> 
 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" > 
 
     <ion-icon name="alarm" item-left> </ion-icon> 
 
      
 
     {{p.title}} 
 
     </button> 
 
    </ion-list> 
 

 
    <ion-list hidden #menu2 > 
 
     <ion-list-header> 
 
      Account 
 
     </ion-list-header> 
 
     <button menuClose ion-item *ngFor="let p of pages1" (click)="openPage(p)" > 
 
     
 
     {{p.title}} 
 
     </button> 
 
    </ion-list> 
 

 
    </ion-content> 
 

 
</ion-menu> 
 

 
<!-- swipeBackEnabled="false" Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> 
 
<ion-nav [root]="rootPage" #content ></ion-nav>

import { Component, ViewChild } from '@angular/core'; 
 
import { Nav, Platform } from 'ionic-angular'; 
 
import { StatusBar, Splashscreen } from 'ionic-native'; 
 

 
import { TabsPage } from '../pages/tabs/tabs'; 
 

 
import { SettingsPage } from '../pages/settings/settings'; 
 
import { AccountPage } from '../pages/account/account'; 
 
import { VoiturePage } from '../pages/voiture/voiture'; 
 
import { LoginPage } from '../pages/login/login'; 
 
import { TarifPage } from '../pages/tarif/tarif'; 
 
    import { HomePage } from '../pages/home/home'; 
 
    import { ModalPagePage } from '../pages/modal-page/modal-page'; 
 
    import { ListevoiturePage } from '../pages/listevoiture/listevoiture'; 
 

 
    import { InsertvoiturePage } from '../pages/insertvoiture/insertvoiture'; 
 

 
    
 
@Component({ 
 
    templateUrl: 'app.html', 
 
providers: [ModalPagePage] 
 
}) 
 
export class MyApp { 
 
    @ViewChild(Nav) nav: Nav; 
 

 
    rootPage = HomePage; 
 

 
    pages: Array<{title: string, component: any}>; 
 
pages1: Array<{title: string, component: any}>; 
 
    constructor(public platform: Platform) { 
 
    this.initializeApp(); 
 
    
 
    
 
this.pages = [ 
 
     { title: ' Home', component: TabsPage }, 
 
     { title: 'tickets' , component: TarifPage }, 
 
     { title: 'login', component: LoginPage }, 
 
    
 
    ]; 
 
    this.pages1 = [ 
 
     { title: 'liste Voiture', component: InsertvoiturePage}, 
 
     
 
     
 
     
 
    ]; 
 
    
 
    
 
    
 
     
 

 
    } 
 
    openPage(page) { 
 
    
 
    this.nav.setRoot(page.component); 
 
    
 

 
    
 
    } 
 
    
 

 
    initializeApp() { 
 
    this.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(); 
 
     
 
    }); 
 
    } 
 
}

Answer 1

loginPage.ts 
 

 
import { Component } from '@angular/core'; 
 
import { NavController, ModalController } from 'ionic-angular'; 
 
import { Storage } from '@ionic/storage'; 
 
import { ModalPagePage } from '../modal-page/modal-page'; 
 
import {HomePage} from '../home/home'; 
 

 

 
@Component({ 
 
    selector: 'page-login', 
 
    templateUrl: 'login.html' 
 
}) 
 
export class LoginPage { 
 

 
    data: any; 
 
    public getsession: any; 
 
    x: any; 
 

 
    public local: Storage; 
 
    constructor(public navCtrl: NavController,public modalCtrl:ModalController) { 
 
    this.data = {}; 
 
    this.data.title = ""; 
 
    this.data.desc = ""; 
 
    this.local = new Storage; 
 
    this.local.set('session', 'true'); 
 

 
    } 
 

 
     ionViewWillEnter() { 
 
    this.getsession = this.local.get('session'); 
 
     this.getsession.then((value)=>{ 
 
     this.x = value; 
 
     if(this.x !== ""){ 
 
     let modal = this.modalCtrl.create(ModalPagePage); 
 
     modal.present(); 
 
     //this.navCtrl.setRoot(ModalPagePage); 
 
     
 
    } 
 
    }); 
 
    } 
 

 
}

homePage.ts 
 

 
import { Component } from '@angular/core'; 
 

 
import { NavController, AlertController } from 'ionic-angular'; 
 
import {ContactPage} from '../../pages/contact/contact'; 
 
import {AccountPage} from '../../pages/account/account'; 
 
import {ListevoiturePage} from '../../pages/listevoiture/listevoiture'; 
 
import {VoitureService} from '../../providers/voitureservice'; 
 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html', 
 
    providers:[VoitureService], 
 
    
 
    styles: [` 
 
    @media (max-width: 600px) { 
 
     .hide-xs { 
 
     display: none; 
 
     } 
 
    } 
 
    `], 
 
}) 
 
export class HomePage { 
 
showbutton:boolean = false; 
 
nbr:any; 
 
    constructor(public navCtrl: NavController,public alertCtrl: AlertController,public voitureservice:VoitureService) { 
 
    this.getNombreVoiture(); 
 
    
 
    } 
 
    getNombreVoiture(){ 
 
    this.voitureservice.nombrevoiture().subscribe(response=> 
 
{ 
 
    this.nbr=response.Nombre; 
 
    
 
}); 
 
    } 
 
openContact() { 
 
     this.navCtrl.push(ContactPage); 
 
    } 
 

 
goToPage1() { 
 
\t this.navCtrl.push(AccountPage); 
 
\t } 
 

 
    goListeVoiture(){ 
 
    this.navCtrl.push(ListevoiturePage); 
 
    } 
 
}