以下方法参考自forum.ionicframework.com，经过实际调整、整理和测试。

（原创文章，转载请注明出处：北京平东信息技术有限公司）

当多个页面的标题栏需要一个“登录按钮”、“首页按钮”，或多个页面拥有相同功能按钮却又不能使用组件方式实现的，该如何进行页面跳转呢？

我们可以参考菜单的menuToggle属性进行设计，接下来将以标题栏登录按钮跳转到登录页面为例。

标题栏中有登录按钮，点击跳转到登录页面。由于标题栏不能作为组件，且没必要为每个页面编写跳转函数，可以使用以下方法。

方案如下：

1.创建指令：goLogin；

2.在goLogin的构造函数中推送跳转消息；

3.在目标页面的构造函数中订阅消息，实现跳转；

4.为所有页面的登录按钮添加goLogin属性；

具体代码：

1.创建指令，在构造函数中推送跳转消息。

创建go-login.ts

import { Directive, ElementRef } from '@angular/core';
import { Events } from 'ionic-angular';

@Directive({
    selector: '[goLogin]'
})
export class GoLoginDirective {

    constructor(el: ElementRef, public events: Events) {
        let raw = this;
        el.nativeElement.onclick = function () {
            raw.events.publish('login:open');
        };
    }
}

2.在home页面的构造函数中订阅消息，实现跳转。

home页面是默认启动的页面，而login页面默认没有启动，所以我们在home中添加订阅。

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';
import { LoginPage } from '../login/login';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(public navCtrl: NavController, public events: Events) {
        let raw = this;
        events.subscribe('login:open', () => {
            //如果你使用了Tabs，可以选中login对应的Tab
			raw.navCtrl.parent.s e l e c t(3);//“囧”把s到t之间的空格删掉
			
			//如果login和home在同一个tab，或你没有使用tab，可以使用
            //raw.navCtrl.popToRoot();//推出除根之外的其他页面
            //raw.navCtrl.push(LoginPage, null, { animate: false });//压入login页面，不显示动画
        });
    }
}

3.为登录按钮添加goLogin属性

<ion-header no-border>
  <ion-navbar>
    <ion-title text-center>标题</ion-title>
    <ion-buttons left>
      <button ion-button icon-only goLogin>
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

需要注意：this的作用域。