Ionic 2可重复使用的页面组件

Question

我试图弄清楚如何创建一个可重用的页面组件,但离子有一堆混乱的错误.

我试图建立一个页面列表:

<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从外面删除它会产生Margin Bug.

2.如果Ion-Header从内部取下,离子按钮的样式会发生变化

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

Answer 1

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

所以，我所做的并且工作得很好：

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