如何显示菜单按钮，登录后另一页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>