html - 如何在 Ionic 应用程序中保持相同的标题部分？

Question

我的 Ionic 应用程序有一个底部选项卡，我可以在其中选择不同的选项卡/页面。每个选项卡/页面都有不同的顶部选项卡，但我想保留整个应用程序的一些标题部分，右边是应用程序的 Logo ，右边是 ionic 头像，当我点击它们时我可以选择不同的用户。我怎样才能做到这一点？

 <ion-header color="primary">
   <ion-item color="primary">
     <div width-50 item-start>
      <img src="assets/icon/myLogo.png">
    </div>
    <div width-50 item-end>
        <img src="assets/icon/avatar-icon.png">
      </div>
  </ion-item>


<ion-toolbar color="primary">
  <ion-segment [(ngModel)]="topTab"  (ionChange)="onTabChanged()">

   <ion-segment-button value="send" >
      <ion-icon color="light"  title="Invia" name="send">Invia</ion-icon>
     <ion-label>Invia</ion-label>
   </ion-segment-button>
   <ion-segment-button value="calendar" >
      <ion-icon color="light" title="Inviate" name="calendar"></ion-icon>
     <ion-label>Inviate</ion-label>
   </ion-segment-button>


 </ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>...

我怎样才能做到这一点？另外我看不到左边的第一张图片和右边的第二张图片，我哪里错了？

Answer 1

您可以创建自定义 header 组件并在任何需要的地方添加标签。

例如:

@Component({
  selector: 'my-header',
  template: '<ion-header color="primary"> ... </ion-header>'
})
export class MyHeader{ ... }

并添加<my-header>在您想要的页面中。

关于图像，您可以使用 the grid system in Ionic .

<ion-grid>
  <ion-row>
    <ion-col>
      <img src="assets/icon/myLogo.png">
    </ion-col>
    <ion-col>
      <img src="assets/icon/avatar-icon.png">
    </ion-col>
  </ion-row>
</ion-grid>