Ionic 側滑菜單打開關閉事件監聽完整實現

需求場景

在 Ionic 應用中監聽側滑菜單的打開/關閉狀態變化，執行相應業務邏輯。

核心實現

import { Component, ViewChild } from '@angular/core';
import { IonMenu } from '@ionic/angular';

@Component({...})
export class AppComponent {
    @ViewChild('mainMenu') menu: IonMenu;

    ngAfterViewInit() {
        // 監聽打開事件
        this.menu.ionWillOpen.subscribe(() => {
            console.log('側滑菜單即將打開');
            this.onMenuOpen();
        });

        // 監聽關閉事件
        this.menu.ionWillClose.subscribe(() => {
            console.log('側滑菜單即將關閉');
            this.onMenuClose();
        });

        // 監聽狀態變化
        this.menu.ionDidOpen.subscribe(() => {
            console.log('側滑菜單已完全打開');
        });
        this.menu.ionDidClose.subscribe(() => {
            console.log('側滑菜單已完全關閉');
        });
    }

    onMenuOpen() {
        // 業務邏輯：暫停視頻、保存狀態等
    }

    onMenuClose() {
        // 業務邏輯：恢復視頻、刷新數據等
    }
}

模板綁定

<ion-menu #mainMenu contentId="mainContent" side="start">
    <ion-header>
        <ion-toolbar><ion-title>菜單</ion-title></ion-toolbar>
    </ion-header>
    <ion-content><!-- 菜單內容 --></ion-content>
</ion-menu>

<ion-router-outlet id="mainContent"></ion-router-outlet>

事件類型對比

參考資料

Ionic 側滑菜單事件監聽詳解