Ionic 2中的全局导航栏动态更改标题

Question

我在 ionic 2 中使用Nav。我需要保留一个带有左右菜单的全局标题。目前我的菜单工作正常，但我有一个小问题。当我更改根页面时，我想更改全局标题的标题，但我似乎无法理解如何这样做。我有以下代码：

dashboard.component.html - 包含导航的页面

<ion-header>
  <ion-navbar>
      <button menuToggle="left" start>
              <img src="build/images/brite-logo-bulb.png" width="auto" height="25px"/>  
      </button>
    <ion-title>
    // how can i change the title dynamically
    </ion-title>
      <button menuToggle="right" end (click)="clearNewAlerts()">
        <ion-icon name="information-circle">
          <div class="notice-circle" *ngIf="newAlerts != 0">{{newAlerts}}</div>          
        </ion-icon>
      </button>
  </ion-navbar>
</ion-header>

<!--Left Navigation Menu HTML-->
<ion-menu [content]="content" type="overlay">
  <img src="build/images/brite-logo.png" width="100px" height="auto"/>
  <ion-content>
    <div class="menu-greeting">Hello, {{firstName}}!</div>
    <hr class="brite-nav"/>
    <ion-list no-lines>
      <button class="brite-nav-item" ion-item (click)="openPage('home')" menuToggle>
        Home
      </button>
      <button class="brite-nav-item" ion-item (click)="openPage('bills')" menuToggle>
        Bills
      </button>
    </ion-list>
    <hr class="brite-nav"/>
  </ion-content>
</ion-menu>

<!--Right Alerts Menu-->
<ion-menu  [content]="content" side="right" class="alerts" type="overlay">
  <brt-alerts></brt-alerts>
</ion-menu>

<!--Navigation View-->
<ion-nav id="nav" #content [root]="rootPage" class="dashboard-wrap"></ion-nav>

我不确定在导航到新页面时如何动态更改<ion-title></ion-title>。

dashboard.compontent.ts

export class DashboardComponent implements OnInit{

    // private properties
    private rootPage: any;

    constructor(private profileService: ProfileService, private alertsService: AlertsService){
        this.rootPage = UsageTabs;//temporarily
        this.setWelcomeName();
    }
    /**
     * @name openPage
     * @description
     * Sets the [root] page to selected page from the menu.
     */
    openPage(page){
        if(page === 'home') {this.rootPage = HomeComponent; return;}
        if(page === 'contact') {this.rootPage = ContactComponent; return;}
        if(page === 'profile') {this.rootPage = ProfileComponent; return;}
        if(page === 'usage') {this.rootPage = UsageTabs; return;}
        if(page === 'share') {this.rootPage = ShareUsageComponent; return;}
    }
}

Answer 1

我会像这样改变你的openPage() 方法并添加一个我将在模板中使用的类属性标题

title = 'Initial Title'
pages = {
   home: HomeComponent,
   contact: ContactComponent,
   ....
}

openPage(page){
   this.rootPage = this.pages[page]
   this.title = page
}

在模板中：

<ion-title>
   {{ title }}
</ion-title>

或者如果你需要其他的标题，你可以这样：

title = 'Initial Title'
pages = {
   home: {
      component: HomeComponent,
      title: 'Title'
   },
   ....
}

openPage(page){
   this.rootPage = this.pages[page].component
   this.title = this.pages[page].title
}

选项卡组件的可能解决方案（代码不准确）：

import { Events } from 'ionic-angular'

...
@Component({...})
export class TabsPage {

   constructor(events: Events) {
      this.events = events
   }
}

在标签模板中：

<ion-tabs (ionChange)="events.publish('titleChange', title)"></ion-tabs>

在您的仪表板组件中，您还可以导入和注入事件并订阅 titleChange 事件：

ngOnInit() {
   this.events.subscribe('titleChange', title => this.title = title)
}