Ionic：如何在滑动菜单（slide menu）关闭时触发事件？

当然可以！Ionic的滑动菜单完全支持监听关闭事件，我会分主流版本给你讲具体实现，毕竟不同版本的API细节有差异：

Ionic 4+（Angular版本）的实现方式 #

Ionic 4及以后的版本采用了Web Components组件体系，官方提供了两个和菜单关闭相关的事件：

• ionWillClose：菜单即将关闭时触发
• ionDidClose：菜单已经关闭后触发

你可以根据需求选择，下面是具体的代码示例：

模板文件（比如app.component.html） #

<ion-menu side="start" content-id="main-content" (ionDidClose)="handleMenuClose()">
  <!-- 菜单内部内容 -->
  <ion-header>
    <ion-toolbar>
      <ion-title>侧边菜单</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false" *ngFor="let page of menuPages">
        <ion-item [routerLink]="[page.url]">
          <ion-icon slot="start" [name]="page.icon"></ion-icon>
          <ion-label>{{ page.title }}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- 主内容区域，对应菜单的content-id -->
<ion-router-outlet id="main-content"></ion-router-outlet>

组件类文件（比如app.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  // 示例菜单页面数据
  menuPages = [
    { title: '首页', url: '/home', icon: 'home' },
    { title: '我的', url: '/profile', icon: 'person' },
  ];

  constructor() {}

  handleMenuClose() {
    // 这里编写菜单关闭后要执行的逻辑
    console.log('滑动菜单已经关闭啦！');
    // 比如刷新页面数据、更新用户状态等操作都可以在这里处理
  }
}

Ionic 3及更早版本的实现方式 #

如果你还在使用Ionic 3或更旧的版本，需要使用ionClose事件，这是旧版本的专属API：

模板文件（app.html） #

<ion-menu [content]="mainContent" (ionClose)="onMenuClosed()">
  <!-- 菜单内容 -->
  <ion-list>
    <button ion-item menuClose>首页</button>
    <button ion-item menuClose>个人中心</button>
  </ion-list>
</ion-menu>

<ion-nav #mainContent [root]="rootPage"></ion-nav>

组件类文件（app.component.ts） #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(public navCtrl: NavController) {}

  onMenuClosed() {
    console.log('菜单已关闭');
    // 在这里执行你的业务逻辑
  }
}

需要注意的是，不管哪个版本，都要确保菜单组件的配置正确：比如Ionic 4+里要指定content-id和主内容区域对应，旧版本要绑定[content]到导航组件，这样事件才能正常触发。

内容的提问来源于stack exchange，提问作者Ali Abdulaal