Ionic4,Ionic5でのAndroidの戻るボタンの無効化、およびカスタムイベントの設定
AndroidにはiPhoneにはない物理的な戻るボタンが存在します。
本記事ではIonicプロジェクトでこの戻るボタンを無効化する方法をまとめます。
Ionic3以前
Ionic3の環境で試していないですがPlatform
のregisterBackButtonAction
メソッドを使用することで制御できるようです。
Ionic4からregisterBackButtonActionが使えない問題
Ionic3のPlatform
にあったregisterBackButtonAction
メソッドがないので、Androidの戻るボタンを上書きすることができません。
移行のドキュメントに記載が見当たりませんでしたが、3から4以降へバージョンアップする際にソースコードを修正する必要があります。
ここら辺の話がIonic4betaのissuesに挙がっています。
GitHub - When platform hardware backButton subscribed, router.goBack should not be triggered
このissuesに対応するためsubscribeWithPriority
が実装されています。Androidの戻るボタンの制御の問題はこのメソッドを使用することで解決できます。
GitHub - feat(angular): observer based api to override hardware back button
subscribeWithPriorityの利用方法
アプリ全体で戻るボタンを制御したい場合
ルートコンポーネントで戻るボタンをオーバーライドするだけで、戻るボタンが無効化されます。
this.platform.ready().then(() => {
this.platform.backButton.subscribeWithPriority(
10000,
() => {
// something...
}
);
});
一部のページで戻るボタンを制御したい場合
一部のページで戻るボタンをオーバライドする場合はページコンポーネントのライフサイクルの入口でオーバーライドし、出口で解除を行います。
アプリに適切なライフサイクルイベントで解除を行なってください。
import { Subscription } from 'rxjs';
export class SpeakerDetailPage {
backButtonSubscription: Subscription;
ngOnInit() {
this.backButtonSubscription = this.platform.backButton.subscribeWithPriority(
10000,
() => {
// something...
}
);
}
ngOnDestroy() {
this.backButtonSubscription.unsubscribe(); // subscribeWithPriorityを解除
}
}
Author And Source
この問題について(Ionic4,Ionic5でのAndroidの戻るボタンの無効化、およびカスタムイベントの設定), 我々は、より多くの情報をここで見つけました https://qiita.com/yunity29/items/a3393488330fbb5dc731著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .