Как сохранить один и тот же заголовочный раздел в приложении Ionic?

Question

мои Ionic приложения имеют нижние вкладки, где я могу выбрать другую вкладку / страницу. Каждая вкладка / страница имеет разные верхние вкладки, но я хочу сохранить некоторые заголовочные разделы для всего приложения, где справа находится логотип приложения, а справа - 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

Вы можете создать пользовательский компонент заголовка и добавить тег в любом месте.

Например:

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

и добавить <my-header> на нужные страницы.

Что касается изображений, вы можете использовать систему сетки в 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>