Angular 基于ionic中的活动选项卡显示标题（角度）

我在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.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>

{{pageTitle}}
节拍统计
阴暗矩阵
轮廓
设置

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