如何关闭 Ionic 4 中的菜单

Question

我刚刚开始 ionic 4，现在我正在搜索一个基本问题，如何在 Ionic 4 中关闭菜单。 ionic 4 到目前为止还没有正确记录。请任何人回答我。提前致谢。

Answer 1

要关闭菜单，请使用此

在 ionic 4 的 ts 文件中使用 menuCtrl

import { MenuController } from ‘@ionic/angular’; 

...

constructor(private menu: MenuController) {}

//点击时调用此 fn

openEnd() {  
 this.menu.close();

 }

Html 中的 OR 使用离子菜单切换

<ion-menu-toggle>
<ion-item > My Button </ion-item>
</ion-menu-toggle>

Answer 2

在 ion-menu-toggle 中添加 autoHide 属性。

       <ion-content>
        <ion-list>
            <ion-menu-toggle auto-hide="true" >
              <ion-item><ion-icon name="ios-home"></ion-icon>Home</ion-item>
              <ion-item><ion-icon name="md-apps"></ion-icon>Services</ion-item>
              <ion-item><ion-icon name="md-calendar"></ion-icon>My Bookings</ion-item>
              <ion-item><ion-icon name="ios-contact"></ion-icon>Profile</ion-item>
              <ion-item><ion-icon name="md-cart"></ion-icon>Cart</ion-item>
              <ion-item><ion-icon name="md-chatboxes"></ion-icon>Feedback</ion-item>
              <ion-item><ion-icon name="md-pin"></ion-icon>Our Locations</ion-item>
              <ion-item (click)="logOut()"><ion-icon name="md-log-out"></ion-icon>Logout</ion-item>
            </ion-menu-toggle>
          </ion-list>
      </ion-content>

Answer 3

// in the page .ts file

          // import menu controller...
import { MenuController } from '@ionic/angular';

          // inject in constructor
constructor(private menu: MenuController) {}

// create this function not inside the constructor 
closeMenu() {
    this.menu.close();
  }
}


// In the page .html file
<ion-item (click)="closeMenu()">
I close menu
</ion-item>

// or call the function on anything

Answer 4

您可以简单地在按钮之间添加 ion-menu-toggle 标签：

<ion-content class="ion-padding">
<ion-menu-toggle>
  <ion-button>Click to close the menu</ion-button>
</ion-menu-toggle>