私はIonic 4アプリで作業しています。ユーザーがモバイルの戻るボタンを2回クリックすると、アプリが閉じますが、これは起こりません。
これは私のapp.component.tsです:
_lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(){
this.backButtonEvent();
}
backButtonEvent() {
document.addEventListener("backbutton", () => {
this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
} else if (this.router.url === '/tabs/tab1') {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
navigator['app'].exitApp(); //Exit from app
} else {
this.presentAlertConfirm();
this.lastTimeBackPress = new Date().getTime();
}
// navigator['app'].exitApp(); // work for ionic 4
}
});
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
}
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}
]
});
await alert.present();
}
_
これは、私がフロントページ(Tab1)にいるときに機能し、他のタブにいるときは機能せず、フロントページに移動しません。
(outlet && outlet.canGoBack())
が機能していないため、問題があると思います。タブのテーマを使用しています。ユーザーが他のタブを使用せず、ハードウェアの[戻る]ボタンをクリックしたときに、ルートをメインタブに送信できますか? 。
Ionic 4つのタブテーマを使用しています。
どんな助けでも大歓迎です。
@Raghavコメントに応えて、私は次のように試してみます。
lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ;
constructor(private platform: Platform) {
this.backButtonEvent();
}
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(0, () => {
this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
if (this.router.url != '/tabs/tab1') {
await this.router.navigate(['/tabs/tab1']);
} else if (this.router.url === '/tabs/tab1') {
if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
this.lastTimeBackPress = new Date().getTime();
this.presentAlertConfirm();
} else {
navigator['app'].exitApp();
}
}
});
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {}
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}]
});
await alert.present();
}
これを試して:
_lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ;
backButtonEvent() {
document.addEventListener("backbutton", async() => {
try {
const element = await this.modalCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
console.log(error);
}
this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
if (this.router.url != '/tabs/tab1') {
await this.router.navigate(['/tabs/tab1']);
} else if (this.router.url === '/tabs/tab1') {
if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
await this.presentAlertConfirm();
this.lastTimeBackPress = new Date().getTime();
}
navigator['app'].exitApp(); // work for ionic 4
}
});
});
}
_
そして、コンストラクターでこの関数を呼び出します。タブテーマを使用していて、outlet.pop();
が機能しなかったため、これで問題が解決しました。だから私はこの方法を試しました。
このようにしてください。
constructor(private platform: Platform) {
this.platform.backButton.subscribe(() => {
});
}
これは、プラットフォームの準備が整う前にregisterBackButtonActionを呼び出しているためです。プラットフォームの準備ができたら、戻るボタンをサブスクライブする必要があります。接近:
this.platform.ready().then(
() => {
this.platform.registerBackButtonAction(() => {
this.platform.exitApp();
});
}
);
Home.tsで試してください
lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChild(IonRouterOutlet, { static: false }) routerOutlets: IonRouterOutlet
constractor( private router: Router, private alertController: AlertController){this.backbutton()}
backbutton() {
console.log('backbutton')
document.addEventListener("backbutton", () => {
console.log('backbutton1')
if (this.routerOutlets && this.routerOutlets.canGoBack()) {
this.routerOutlets.pop();
}
// else if (this.router.url != '/tabs/tabs/tab1') {
// this.router.navigate(['/tabs/tabs/tab1']);
// }
else if (this.router.url === '/home') {
if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
this.lastTimeBackPress = new Date().getTime();
this.presentAlertConfirm();
} else {
navigator['app'].exitApp();
}
}
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => { }
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}]
});
await alert.present();
}