ionic2 导航返回按钮

key: ionic2 navBar 自定义返回按钮
ionic2 修改导航的返回按钮事件,通常有两个方法。

方法一:自定义返回按钮

hideBackButton 影藏导航栏自带的返回按钮;
自定义返回按钮替换即可。

<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();
    }
  }
}

当然也可以修改返回按钮的文字等

navbar.ts
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,071评论 0 66
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,261评论 4 61
  • 勞動了一天,感覺一整天都是很充實的。中午睡了個小小的午覺,醒來天空是黑壓壓的一片。約摸著暴風雨要來啦。 ...
    Visby阅读 422评论 13 7
  • 越吃越辣,越辣越想吃,三碗饭不费吹灰之力,就樯橹灰飞烟灭烟消云散了。像李白的诗那么夸张,像辛弃疾的词那么豪放,像李...
    徐克惜愚兄弟阅读 271评论 2 0
  • “职业”的定义是,用专业的技能和知识丰富社会物质或精神生活的一项工作。 生活中,为了职业的发展,人们可能会...
    渔洀晿脕阅读 187评论 0 0