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>

我做了repo to express the problem Here

重现： 点击个人资料图片头像，

错误：标题模板出现，但后退按钮绑定到父标题。

尝试修复

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

2.如果从内部移除Ion-Header，则离子按钮的样式会发生变化

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

Answer 1

在我看来，问题实际上是您实际呈现<ion-header>和<ion-navbar>两次：您在page-base模板中有这些问题，其中ng-container包含另一对{{1} }和<ion-header>。

所以，我所做的和完美的工作：

页面base.html文件：

变化：

<ion-navbar>

为：

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

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

1 个答案: