Global NavBar in Ionic 2 dynamisch wechselnden Titel

Question

Ich verwende die Nav in ionic 2. Ich muss eine globale Kopfzeile mit einem linken und rechten Menü beibehalten. Derzeit funktioniert mein Menü richtig, aber ich habe ein kleines Problem. Wenn ich die Root-Seiten ändere, würde ich gerne den Titel der globalen Kopfzeile ändern, aber ich kann nicht verstehen, wie das geht. Ich habe den folgenden Code:

dashboard.component.html - Seite mit Nav

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

Ich bin nicht sicher, wie dynamisch die <ion-title></ion-title> ändern, wenn auf eine neue Seite zu navigieren.

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

Ich würde Ihre openPage() Methode ein bisschen wie diese und hat eine Klasse Eigenschaft Titel ändern, die ich in Vorlage

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

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

in Vorlage verwenden würde:

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

Oder wenn Sie andere Titel benötigen, können Sie es so machen:

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

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

Mögliche Lösung für Tab Komponente (Code ist nicht korrekt):

import { Events } from 'ionic-angular' 

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

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

In Registerkarten Vorlage:

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

In Ihrer Dashboard-Komponente importieren und injizieren Sie auch Ereignisse und abonnieren das Ereignis titleChange:

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