Ionic 2のグローバルNavBar動的に変更するタイトル

Question

私はNavイオン2を使用しています。左右のメニューでグローバルヘッダを保持する必要があります。現在、私のメニューは正常に動作していますが、小さな問題があります。ルート・ページを変更すると、グローバル・ヘッダーのタイトルを変更したいのですが、その方法を理解できないようです。ナビゲーション

<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.component.html：私は、次のコードを持っています。

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