ionic-framework - 如何在Ionic 4中切换菜单

标签 ionic-framework ionic4

我是Ionic的新手,并且正在使用sidemenu在Ionic 4中开发一个基本应用程序。

我在侧边菜单中添加了一个按钮,当我单击该按钮时,菜单未切换。有人可以帮我吗?
这是我正在尝试的代码。

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


不重复问题的说明


请检查粗体字,我已经有一个正常工作的副菜单,但是问题是当我单击ion-button而不是ion-item时,我想关闭该副菜单。

最佳答案

只需将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-framework - 如何在Ionic 4中切换菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53803975/

相关文章:

angular - 带有 Angular 9 的 Ionic 5 - Angular JIT 编译失败 : '@angular/compiler' not loaded

javascript - 当我更改页面时,地理位置给我一个错误

html - 如何显示内联元素ionic 3

javascript - 在两个 View 中使用 Angular JS 的 Ionic 应用程序的动态列表

javascript - 在 ionic 中注册 onHardwareBackButton 事件后退按钮仍然使页面导航到上一页

javascript - ionic 4 个 ionic 项在同一行显示数据。如果数据太长,则只显示可以显示的数据

ionic-framework - 你如何将 Font Awesome 添加到 Ionic 4

css - 全屏背景图像和切换标题的可见性

android - ionic 框架 : Not loading google maps library on device

javascript - 如何根据if条件替换ion-item中的文本