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>

我做了一个repo to express the problem Here

复制： 点击头像头像，

Bug：出现标题模板但返回按钮绑定到父标题。

尝试修复

1.如果您从外部删除Ion-Header，则会产生Margin Bug。

2.如果你把Ion-Header从里面去掉，ion-buttons的样式就会改变

我不想使用 css 修复的兔子洞。 如何在不破坏 ionic 布局或功能的情况下创建可重用的 ionic 页面组件？

Answer 1

在我看来，问题在于您实际上渲染了两次 <ion-header> 和 <ion-navbar>：您将它们放在 page-base 模板中，其中 ng-container 包含另一对 <ion-header> 和 <ion-navbar>。

所以，我做了什么并且工作得很好：

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>