multi-split-pane.ts

import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { NgZone } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  private ionSplitPane: any;
  private ionMenu: any;
  private menuId = 'main1';
  constructor(
    private menuCtrl: MenuController,
    private zone: NgZone,
  ) {}

  ionViewWillEnter() {
    this.ionSplitPane = document.querySelector(`ion-split-pane[contentId=${this.menuId}]`);

    /**
     * DOMが生成されていない初回は自動的に以下処理が走るため処理を中断
     */
    if (this.ionSplitPane === undefined) {
      return;
    }

    /**
     * Media Queryをリアルタイムで有効にしたい時に必要。
     * ionSplitPaneの生成時メソッドを強制的に実行
     * connectedCallback():
     * https://github.com/ionic-team/ionic/blob/master/core/src/components/split-pane/split-pane.tsx#L59-L62
     */
    this.ionSplitPane.connectedCallback();

    /**
     * ionMenuはひとつのみ有効なので、必要なもののみ有効化する必要あり。
     * ライフサイクルに紐ついていないため、Zoneで変更検知する必要あり
     */
    this.menuCtrl.enable(true, this.menuId).then(d => this.zone.run(() => {}));
    this.ionMenu = document.querySelector(`ion-menu[contentId=${this.menuId}]`);

    /**
     *  不具合の手動修正
     *  本来 `enable()` に紐付くはずなのに紐ついていないので手動でclassを追加
     */
    if (!this.ionMenu.classList.contains('menu-pane-visible')) {
      this.ionMenu.classList.add('menu-pane-visible');
    }

    /**
     * Menuの生成
     * https://github.com/ionic-team/ionic/blob/master/core/src/components/menu/menu.tsx#L142-L197
     */
    this.ionMenu.connectedCallback();
  }

  ionViewWillLeave() {
    /**
     * ionMenuはひとつのみしか使えないため、ページ遷移毎にすべてのionMenuを無効化する必要あり
     */
    this.menuCtrl.enable(false, this.menuId).then(d => this.zone.run(() => {}));

    /**
     * 終了時処理。
     * ionSplitPane.disconnectedCallback():
     * https://github.com/ionic-team/ionic/blob/master/core/src/components/split-pane/split-pane.tsx#L64-L69
     */
    this.ionSplitPane.disconnectedCallback();

    /**
     * 終了時処理。
     * ionMenu.disconnectedCallback():
     * https://github.com/ionic-team/ionic/blob/master/core/src/components/menu/menu.tsx#L204-L217
     * アニメーションの監視を外したり。パフォーマンス向け。
     */
    this.ionMenu.disconnectedCallback();
  }
}

HTML側はこちら。有効無効を操作するために、 ion-menu にmenuIdが必要な点に注意。

<ion-split-pane [contentId]="menuId">
  <ion-menu [contentId]="menuId" [menuId]="menuId">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu1</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <section class="split-pane-content" [id]="menuId">
    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Tab 1
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <app-explore-container name="Tab 1 page"></app-explore-container>
    </ion-content>
  </section>
</ion-split-pane>
<style>
  /*
   * theme/variables.scss などに
   * 共通CSSにメインコンテンツの横幅を規定してください
   */
  .split-pane-content {
    width: 100%;
  }
</style>

RLM向け処理なので日本語では不要。アラビア語など向け処理のみが実行される

これ removeListener の略っぽいっすー！

まじか。めっちゃ恥ずかしい（調べてもらってありがとつございます）