如何在Ionic 4中切换菜单

Question

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

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

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

不重复问题的说明

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

Answer 1

只需将您ion-button的ion-menu-toggle内容封装在一个元素中，如下所示：

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

在此处查看文档

编辑： 如果您不想使用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>

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