Javascript 离子2可重用页面组件

我试图弄清楚如何创建一个可重用的页面组件，但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.如果从外部移除

离子头

，则会产生边距错误

2.如果从内部移除

离子头

，离子按钮的样式将发生变化

我不想使用css补丁的兔子洞。

---

如何在不破坏爱奥尼亚的布局或功能的情况下创建一个可重用的爱奥尼亚页面组件？

在我看来，问题在于您实际渲染了

和

两次：您将它们放在

页面基
模板中，其中ng容器包含另一对
和

因此，我所做的和工作都非常完美：

page-base.html：

更改：

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



致：


请阅读完整问题，如我所述“2.如果从内部移除离子头，离子按钮的样式将发生变化”，这样做将改变标题中按钮的样式，即将按钮呈现为具有不同样式的块。查看我的回购示例我尝试了你的代码，并根据我的答案进行了更改，我发现标题（右侧的搜索栏+保存按钮，白色背景，黑色文本）完全没有区别，返回按钮按预期显示。但是，如果我从about.html中删除ion标头和ion navbar标记，那么样式确实会改变。我不知道确切的原因，这可能是一个错误。如果标题样式比这好，这意味着它是另一个错误，并且第一项隐藏在标题后面，因为ion内容不尊重标题。
<ng-container *ngTemplateOutlet="header"></ng-container>