如何顯示菜單按鈕，登錄後另一頁ionic2

Question

你好我正在開發移動應用程序，我登錄成功，然後我切換另一個

頁那裏，我看到後退按鈕沒有菜單按鈕。我已經隱藏後退按鈕，但我想

顯示菜單圖標，但它不是我showing.How可以顯示一個菜單圖標按鈕後

成功login.I使用home.ts登錄。

doLogin(event) {  


     var user1 =this.loginForm.value; 
     var password = this.loginForm.controls.password.value; 
     this.homeService.doLogin(user1).subscribe(
      user =>{ 
        this.user = user.results; 
        this.navCtrl.push(DashboardComponent, {thing1: user }); 
        //console.log(user); 
       }, 
       err => { 
        console.log(err); 
       }, 
       () => console.log('login complete') 

      ); 
    } 

這裏是另一個頁面display.html，我想顯示菜單圖標。

<ion-header> 
    <ion-navbar hideBackButton="true"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
<div id="login_image" > 
    <div class="header padding text-center logodata"> 
    <img src="assets/images/big_logo.png" alt="Your logo here" width="40%" height="auto" class="logoImage"/> 
    </div> 

    <div class="header padding text-center panda"> 
    <img src="assets/images/bear.png" alt="Your logo here" width="40%" height="auto" class="logobear"/> 
    </div> 

    <h1 class="getstarted" style="text-align:center">Get Started !</h1> 
</div> 
     <div class="dashboardSection"> 

      <a href=""> 
       <div class="header padding text-center classes common"> 
        <img src="assets/images/icos_15.png" alt="Your logo here" width="50%" height="auto"/> 
        <p class="Sectiontitle">STUDENTS</p> 
       </div> 
      </a> 


     </div> 
</ion-content> 

Answer 1

如果您想要顯示菜單按鈕而不是後退按鈕，您需要將主頁設置爲根（而不是僅僅推動它）。

doLogin(event) {  
    var user1 =this.loginForm.value; 
    var password = this.loginForm.controls.password.value; 
    this.homeService.doLogin(user1).subscribe(
    user =>{ 
     this.user = user.results; 
     this.navCtrl.setRoot(DashboardComponent, {thing1: user }); // <- Here! :) 
     //this.navCtrl.push(DashboardComponent, {thing1: user }); 
     //console.log(user); 
    }, 
    err => { 
     console.log(err); 
    }, 
    () => console.log('login complete') 
); 
} 

並在視圖你不需要隱瞞什麼，因爲後退按鈕將不會顯示：

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
... 
</ion-content> 

的主要區別是，push推動另一個組件到導航堆棧（這就是爲什麼你可以看到後退按鈕，甚至使用Android中的物理後退按鈕返回到前一頁），而setRoot將該組件設置爲導航堆棧的根。

另外，還要確保你app.html文件ion-menu有persistent屬性（docs）是這樣的：

<ion-menu persistent="true" [content]="mycontent"> 
    <ion-content>...</ion-content> 
</ion-menu>