Last active
April 23, 2020 08:41
-
-
Save rdlabo/9aa0b136fe9c21b05ca2f99c065eef83 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} |
RLM向け処理なので日本語では不要。アラビア語など向け処理のみが実行される
これ removeListener
の略っぽいっすー!
まじか。めっちゃ恥ずかしい(調べてもらってありがとつございます)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
HTML側はこちら。有効無効を操作するために、
ion-menu
にmenuIdが必要な点に注意。