Ionic 2 многоразовый компонент страницы

Question

Я пытаюсь выяснить, как я могу создать повторно используемый компонент страницы, но в ionic есть куча ошибок включения.

Я пытался создать базу списка страниц:

<ion-header *ngIf="header || hasHeader">
    <ion-navbar>
        <ng-container  *ngTemplateOutlet="header"></ng-container>
    </ion-navbar>
</ion-header>
<ion-content>
   <!-- TODO: abstract refresher once it can be put in a component without ion content -->
   <ion-refresher (ionRefresh)="pageListBase.refresh($event)">
     <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh"
                          refreshingSpinner="circles" refreshingText="Refreshing...">
     </ion-refresher-content>
   </ion-refresher>
   <list-base #pageListBase [filter]="filter" 
                            [baseProvider]="baseProvider" 
                            [config]="config" 
                            [template]="itemTemplate">
   </list-base>
   <ion-footer *ngIf="footer">
       <ng-container *ngTemplateOutlet="footer"></ng-container>    
   </ion-footer>
 </ion-content>

Я снова использую эту страницу здесь:

<page-base [header]="headerTemplate"></page-base>

<ng-template #headerTemplate>
  <ion-header>
    <ion-navbar align-title="center">
      <ion-buttons start>
          <button ion-button>Save</button>
      </ion-buttons>
      <ion-searchbar></ion-searchbar>
    </ion-navbar>
  </ion-header>
</ng-template>

, а также здесь:

<page-base #pageBase [header]="headerTemplate"></page-base>

<ng-template #headerTemplate>
  <ion-header>
    <ion-navbar align-title="center">
      <ion-buttons start>
        <button ion-button>button</button>
      </ion-buttons>
      <ion-title start>
          Back Button is hidden behind the header
      </ion-title>
    </ion-navbar>
  </ion-header>
</ng-template>

Я сделал репо, чтобы выразить проблему Здесь

Воспроизводить: Нажмите на аватарку профиля,

Ошибка : появляется шаблон заголовка, но кнопка возврата привязана к родительскому заголовку.

Попытки исправить

1. Если вы удаляете Ion-Header снаружи, это создает ошибку маржи.

2. Если вы удалите Ion-Header изнутри, стили ионных кнопок изменятся

Я бы предпочел не использовать кроличью нору исправлений CSS. Как я могу создать повторно используемый компонент страницы ionic, не нарушая макет или функциональность ionic?

Answer 1

Мне кажется, что проблема в том, что вы на самом деле визуализируете <ion-header> и <ion-navbar> дважды: они есть в шаблоне page-base, где ng-контейнер содержит еще одну пару <ion-header> и <ion-navbar>. * 1006.*

Итак, что я сделал и отлично работал:

page-base.html:

изменить:

<ion-header>
  <ion-navbar align-title="center">
    <ng-container *ngTemplateOutlet="header"></ng-container>
  </ion-navbar>
</ion-header>

на:

<ng-container *ngTemplateOutlet="header"></ng-container>