如何在 Ionic 应用程序中保留相同的 header 部分？

Question

我的 Ionic 应用程序有一个底部选项卡，我可以在其中选择不同的 tab/page。每个 tab/page 都有不同的顶部选项卡，但我想为整个应用程序保留一些 header 部分，其中右侧是应用程序的徽标，右侧是 ion-avatar ，当我点击它们时，我可以选择不同的用户。我怎样才能做到这一点？

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

如何在 Ionic 应用程序中保留相同的 header 部分？

How keep the same header section in a Ionic app?

html

css

ionic-framework

angular

ionic4