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();
  }
}

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