javascript - Ionic 2 återanvändbar sidkomponent

Jag försöker lista ut hur jag kan skapa en återanvändbar sidkomponent men Ionic har en röra av transklusionsbuggar.

Jag har försökt att göra en sidlista-basklass:

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

Jag återanvänder den här sidan här:

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

och också här:

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

Jag har skapat ett repo för att uttrycka problemet här

Reproducera: Klicka på en profilbildavatar,

Fel: Header-mallen visas men bakåtknappen är bunden till föräldrahänden.

Försök att fixa

1. Om du tar bort Ion-Header från utsidan skapar det en marginalbugg.

2. Om du tar bort Ion-Header från insidan ändras stilarna för ion-knappar

Jag skulle föredra att inte använda en kaninhål av CSS-fixar. Hur kan jag skapa en återanvändbar Ionic-sidkomponent utan att bryta Ionics layout eller funktionalitet?

Svar #1

Problemet verkar för mig vara att du faktiskt renderar <ion-header> och <ion-navbar> två gånger: du har dem i page-base-mallen där ng-container inkluderar ett annat par <ion-header> och <ion-navbar>.

Så, det jag gjorde och som fungerade perfekt:

page-base.html:

ändra :

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

till :

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

Relaterade artiklar