key: ionic2 navBar 自定義返回按鈕
ionic2 修改導(dǎo)航的返回按鈕事件锋喜，通常有兩個(gè)方法叙淌。
方法一：自定義返回按鈕
hideBackButton 影藏導(dǎo)航欄自帶的返回按鈕；
自定義返回按鈕替換即可。
<ion-header>
<ion-navbar hideBackButton>
<ion-buttons left>
<button ion-button (click)="doYourStuff()">
<ion-icon class="customIcon" name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>Page Title</ion-title>
</ion-navbar>
</ion-header>
doYourStuff()
{
alert('cowabonga');
this.navCtrl.pop(); // remember to put this to add the back button behavior
}
方法二：修改按鈕的backButtonClick
@ViewChild(Navbar) navBar: Navbar 獲取到navBar
修改navBar的 backButtonClick() 事件
@Component({
selector: 'my-page',
template: `
<ion-header>
<ion-navbar>
<ion-title>
MyPage
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
...
</ion-content>
`
})
export class MyPage {
@ViewChild(Navbar) navBar: Navbar;
constructor(private navController: NavController){}
ionViewDidLoad() {
this.navBar.backButtonClick = (e:UIEvent)=>{
// todo something
this.navController.pop();
}
}
}
當(dāng)然也可以修改返回按鈕的文字等
navbar.ts
