angular – Ionic 2中的Global NavBar动态更改标题

发布时间：2020-12-17 17:27:21 所属栏目：安全来源：网络整理

导读：我在离子2中使用 Nav.我需要保留带有左右菜单的全局标题.目前我的菜单工作正常,但我有一个小问题.当我更改根页面时,我想更改全局标题的标题,但我似乎无法理解如何这样做.我有以下代码： dashboard.component.html – 包含导航的页面 ion-header ion-navbar b

我在离子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;}
    }
}

解决方法

我会改变你的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
}

Tab Component的可能解决方案(代码不准确)：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!