如何在 Ionic 4 中切换菜单

Question

我是 Ionic 新手，我正在使用 sidemenu.

在 Ionic 4 中开发一个基本应用程序

我在侧边菜单中添加了一个按钮，当我单击该按钮时，菜单没有切换。任何人都可以帮助我吗？这是我正在尝试的代码。

<ion-button color="primary" (click)="function()" class="class" menuToggle expand="block" fill="outline"> text </ion-button>

Explanation of not Duplicate question

请检查粗体文本，我已经有一个可用的侧边菜单，但问题是我想在单击 ion-button 时关闭侧边菜单，而不是 ion-item。

Answer 1

在你的app.component.html中：

<ion-app>
  <ion-split-pane when="sm">
      <ion-menu>
        <ion-header>
          <ion-toolbar color="primary" text-center>
            <ion-title>MyApp</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
              <ion-item [routerDirection]="'root'" href={{p.url}}>
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{p.title}}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Answer 2

只需将 ion-button 封装在 ion-menu-toggle 元素中，如下所示：

<ion-menu-toggle>
  <ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>

View the documentation here

编辑： 如果你不想使用 ion-menu-toggle，你可以这样做：

在你的 app.component.ts:

import { MenuController } from '@ionic/angular'; //import MenuController to access toggle() method.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    public menuCtrl: MenuController
  ) {
    this.initializeApp();
  }

toggleMenu() {
    this.menuCtrl.toggle(); //Add this method to your button click function
  }

}

在你的app.component.html中：

<ion-button (click)="toggleMenu()">Toggle Menu</ion-button>

要查看所有方法，check the docs here。

如何在 Ionic 4 中切换菜单

How to toggle Menu in Ionic 4

ionic-framework

ionic4