基于离子（角度）中的活动选项卡显示标题标题答案

【问题标题】：Display header title based on active tab in ionic(angular)基于离子（角度）中的活动选项卡显示标题标题
【发布时间】：2020-11-03 08:47:31
【问题描述】：

我在 dashboard.page.html 中有不同的选项卡和标题，如下所示

<ion-header class="kq-app-header">
  <ion-toolbar class="kq-app-header">
    <ion-title class="ion-text-center" >{{pageTitle}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-tabs>  
    <ion-tab-bar  slot="bottom" >

      <ion-tab-button tab="beat-statistics">
        <ion-icon name="stats-chart"></ion-icon>
        <ion-label>Beat Statistics</ion-label>
      </ion-tab-button>       
      <ion-tab-button tab="gloomy-matrix">
        <ion-icon name="stats-chart"></ion-icon>
        <ion-label>Gloomy matrix</ion-label>
      </ion-tab-button>  
      <ion-tab-button tab="profile">
        <ion-icon name="person-circle-outline"></ion-icon>
        <ion-label>Profile</ion-label>
      </ion-tab-button>   
      <ion-tab-button tab="settings">
        <ion-icon name="settings-outline"></ion-icon>
        <ion-label>Settings</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

基于标签更改，我想在 dashboard.page.html 的标题中显示 chartTitle 值页面。

以下是标签页名称之一的代码beat-statistics.page.ts

import { LoadingController, Platform } from '@ionic/angular';
import { EnvService } from './../../services/env.service';
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, EventEmitter, Output } from '@angular/core';
import { Chart } from 'chart.js';
import { ApiService } from 'src/app/services/api.service';
import { Storage } from '@ionic/storage';
import { AppConst } from 'src/app/app.constants';

@Component({
  selector: 'app-beat-statistics',
  templateUrl: './beat-statistics.page.html',
  styleUrls: ['./beat-statistics.page.scss'],
})
export class BeatStatisticsPage implements OnInit,AfterViewInit {

  private chartTitle = 'BEAT COMPLIANCE'; 
  
  constructor() {

    this.plt.ready().then((readySource) => {
      console.log('Platform ready from', readySource);

    });
  }
  ngOnInit() {

  }

  ngAfterViewInit(){


  }

  ionViewDidEnter() {
   
  }


}

如何在离子（角度）中实现这一点？如果有其他方法可以解决这个问题，请回答。谢谢

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

您只需在 dashboard.page.ts 中更改点击事件的变量：

export class dashboardPageComponent implements OnInit,AfterViewInit {
  pageTitle:string = "testTitle"; 
  constructor() {
  }
  
  changeTitle(title :string):void {
      this.pageTitle= title;
  }

}

HTML：

<ion-header class="kq-app-header">
  <ion-toolbar class="kq-app-header">
    <ion-title class="ion-text-center" >{{pageTitle}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-tabs>  
    <ion-tab-bar  slot="bottom" >

      <ion-tab-button tab="beat-statistics" (click)="changeTitle('tabTitle1')">
        <ion-icon name="stats-chart"></ion-icon>
        <ion-label>Beat Statistics</ion-label>
      </ion-tab-button>       
      <ion-tab-button tab="gloomy-matrix" (click)="changeTitle('tabTitle2')">
        <ion-icon name="stats-chart"></ion-icon>
        <ion-label>Gloomy matrix</ion-label>
      </ion-tab-button>  
      <ion-tab-button tab="profile" (click)="changeTitle('tabTitle3')">
        <ion-icon name="person-circle-outline"></ion-icon>
        <ion-label>Profile</ion-label>
      </ion-tab-button>   
      <ion-tab-button tab="settings" (click)="changeTitle('tabTitle4')">
        <ion-icon name="settings-outline"></ion-icon>
        <ion-label>Settings</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

【讨论】：