如何在 Ionic 4 中切换菜单 [英] How to toggle Menu in Ionic 4

问题描述

我是 Ionic 的新手，我正在使用 sidemenu 在 Ionic 4 中开发一个基本的应用程序.

I am new to Ionic, and I am developing a basic app in Ionic 4 with sidemenu.

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

I am adding a button in Side Menu, when I am clicking on that button the menu is not toggling. can anyone help me in this ? here's the code which I am trying.

文本</ion-button>

非重复问题的解释

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

Please check the Bold text, I already have a working sidemenu, but the problem is I want to close the sidemenu when I click on ion-button, not on ion-item.

推荐答案

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

Simply encapsulate your ion-button within an ion-menu-toggle element, like so:

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

在此处查看文档

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

If you don't want to use ion-menu-toggle, you can do this instead:

在你的 app.component.ts 中:

In your 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 中:

And in your app.component.html:

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

要查看所有方法，在此处查看文档.

这篇关于如何在 Ionic 4 中切换菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！