我發現許多解決方案只是在部分答案,儘管將兩種解決方案合併爲一個與上述問題相關的答案可能很有用:「如何更改後退按鈕文本並單擊某個特定頁面的操作IONIC 2+?「如何更改後退按鈕文本並單擊IONIC 2+中特定頁面的操作?
回答
這個問題在其他地方得到了回答,但在許多不同的部分,這意味着他們只使用各種解決方案涵蓋「更改文本」或顯示如何爲後退按鈕執行「自定義點擊操作」。這個答案主要是將兩者結合起來展示最簡單的解決方案。該解決方案還包括Android和Windows手機等設備的物理後退按鈕。 iPhone沒有後退按鈕。
每個文件將全部顯示在下面,以幫助初級開發人員看到更全面的圖片。
的src /應用/ app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, Navbar, NavController, AlertController } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { SitesPage } from '../pages/sites/sites';
import { NavigationProvider } from '../providers/navigation/navigation';
@NgModule({
declarations: [
MyApp,
HomePage,
DashboardPage,
SitesPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DashboardPage,
SitesPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
NavigationProvider
]
})
export class AppModule {}
的src /應用/ app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NavigationProvider } from '../providers/navigation/navigation';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(private platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navProvider: NavigationProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
platform.registerBackButtonAction(() => {
this.navProvider.backButtonAction();
});
statusBar.styleDefault();
splashScreen.hide();
});
}
}
的src /頁/儀表板/ dashboard.ts
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, Navbar } from 'ionic-angular';
import { SitesPage } from '../sites/sites';
import { NavigationProvider } from '../../providers/navigation/navigation';
@IonicPage()
@Component({
selector: 'page-dashboard',
templateUrl: 'dashboard.html',
})
export class DashboardPage {
@ViewChild(Navbar) navBar: Navbar;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public navProvider: NavigationProvider) {}
ionViewDidLoad() {
this.viewCtrl.setBackButtonText('Logout');
this.navBar.backButtonClick =() => {
this.navProvider.backButtonAction();
};
}
sites() {
this.navCtrl.push(SitesPage);
}
}
SRC /提供商/導航/ navigation.ts
import { Injectable } from '@angular/core';
import { Platform, NavController, AlertController } from 'ionic-angular';
import { App } from "ionic-angular/index";
@Injectable()
export class NavigationProvider {
logoutAlert: any = null;
exitAppAlert: any = null;
private navCtrl: NavController;
constructor(private platform: Platform, private app: App, private alertCtrl: AlertController) {
//get the nav controller which is only ready when the platform is ready
platform.ready().then(() => {
this.navCtrl = app.getActiveNavs()[0];
});
}
//* perform the back button action
backButtonAction() {
// can we pop this page?
if(this.navCtrl.canGoBack()) {
// are we on the page that we want to trigger the logout alert?
const view = this.navCtrl.getActive();
if(view.component.name == 'DashboardPage') {
// is the logout alert still visible?
if(this.logoutAlert) {
// dismiss it instead :)
this.logoutAlert.dismiss();
this.logoutAlert = null;
} else {
// show the logout alert
this.logoutAlertAction();
}
} else {
//pop the page to perform default back action
this.navCtrl.pop();
}
} else {
// we are at the root page so the next step is to exit the app
// is the exit app alert still visible?
if(this.exitAppAlert) {
// dismiss it instead :)
this.exitAppAlert.dismiss();
this.exitAppAlert = null;
} else {
this.exitAppAlertAction();
}
}
}
//*/
//* prompt the user before logging out
logoutAlertAction() {
this.logoutAlert = this.alertCtrl.create({
title: 'Logout',
message: 'Are you sure you want to log out?',
buttons: [
{
text: 'No',
role: 'cancel',
handler:() => {
// don't do anything
}
},
{
text: 'Yes',
handler:() => {
// clear sessions or do something to log the user out before popping the page
this.navCtrl.pop();
}
}
]
});
this.logoutAlert.present();
}
//*/
//* prompt the user before exiting the application
exitAppAlertAction() {
this.exitAppAlert = this.alertCtrl.create({
title: 'Exit Application',
message: 'Are you sure you want to exit the app?',
buttons: [
{
text: 'Yes',
handler:() => {
// exit the application
this.platform.exitApp();
}
},
{
text: 'No',
role: 'cancel',
handler:() => {
// don't do anything
this.exitAppAlert = null;
}
}
]
});
this.exitAppAlert.present();
}
//*/
}
我同意,但這並不處理Android設備的物理後退按鈕,對不對? – sebaferreras
我在Android和iOS設備上都測試過它,它在兩者上都運行良好。我沒有在基於Windows的設備上測試它,所以不能說它是否在那裏工作,但我相信它會。 – Kobus
我實際上沒有測試物理後退按鈕。將嘗試一下,看看會發生什麼。 – Kobus
- 1. 如何刷新history.state更改頁面(單擊後退按鈕)?
- 2. Android:更改後退按鈕的操作
- 3. 特定按鈕點擊後的操作
- 4. 如何重新加載後退按鈕單擊該頁面中
- 5. 重定向到瀏覽器上的特定操作後退按鈕單擊MVC
- 6. 如何去表單頁面與價值從操作頁面後點擊後退按鈕
- 7. 如何處理僅在特定頁面上的後退按鈕?
- 8. 如何更改後退按鈕後的文本
- 9. 如何禁用Ionic中特定頁面的硬件按鈕
- 10. Ionic 2自定義後退按鈕動作
- 11. 單擊按鈕後Android按鈕文本更改爲垂直
- 12. 單擊按鈕時如何更改按鈕的文本? - 斯威夫特
- 13. 單擊後退按鈕不執行任何操作
- 14. 用Ionic中的側面菜單圖標替換後退按鈕
- 15. 如何更改離子2中後退按鈕的標籤?
- 16. 單擊「後退」按鈕時如何保留表單數據
- 17. Safari和Chrome後退按鈕更改隱藏並提交表單
- 18. 如何更改Xamarin.Forms上的後退按鈕文本
- 19. 在C#中單擊按鈕後更改文本的顏色..?
- 20. 快速按鈕操作文本更改
- 21. 如何更改uinavigationbar後退按鈕文本
- 22. UICollectionViewCell按鈕單擊並更改單元格上的文本
- 23. 當點擊瀏覽器的後退按鈕時,重定向到特定頁面
- 24. 後退按鈕單擊不起作用
- 25. 如何更改後退按鈕從文本到圖像在UINavigationBar
- 26. 操作欄主頁按鈕崩潰,而後退按鈕工作
- 27. 單擊按鈕時更改按鈕中的文本
- 28. 更改html表單值,加載頁面並點擊按鈕
- 29. 如何在UNITY中單擊它時更改按鈕的文本?
- 30. 單擊按鈕時,如何更改特定圓的半徑?
下面提到該解決方案適用於Android和iOS設備兩者。 Windows設備在此階段未經測試。 – Kobus