Question

我有两个页面，分别是登录页面和主页，当用户成功登录时，它将被定向到主页，并将其设置为根页面。我已经通过使用navCtrl.canGoBackFunction确认了这一点，这是错误的。我尝试添加菜单切换，但是当我按下切换按钮时，菜单没有显示

这是我的home.html

<ion-header>
    <ion-navbar color="primary">
        <button menuToogle ion-button icon-only class="menu-button-left">
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
        <button ion-button class="menu-button-right" (click)="logout()">
            <p>Logout</p>
        </button>
    </ion-navbar>
  </ion-header>
  <ion-content padding-left padding-right>

  </ion-content>

我的home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'

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

  constructor(
    public navCtrl: NavController,
    private authService: AuthService
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
    console.log(localStorage.getItem('token'));
  }

  logout(){
    console.log('logout button clicked');
    this.authService.logOut();
    this.navCtrl.setRoot(LoginPage);
    this.navCtrl.popToRoot();
  }

}

我的app.html

<ion-menu [content]="mycontent">
        <ion-content>
          <ion-list>
            <p>List/p>
          </ion-list>
        </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>

我已经多次阅读该手册，但我的操作方式没有发现任何问题，该手册说我将其放在navbar中，该页面应该是root。我也尝试使用工具栏，但再次单击菜单切换按钮没有任何作用。有什么想法吗？

Answer 1

永久菜单在导航堆栈中所有页面上的导航栏中显示MenuToggle按钮。要使菜单持久化，请将元素上的持久化设置为true。请注意，这仅会影响菜单永久连接设置为true的附加到菜单的导航栏中的MenuToggle按钮，任何其他MenuToggle按钮均不会受到影响。在您的代码中，您必须像下面的代码那样进行更改。

我的app.html

<ion-menu [content]="mycontent" persistent="true">
        <ion-content>
          <ion-list>
            <p>List/p>
          </ion-list>
        </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>

离子2：菜单切换不起作用

1 个答案: