我试图弄清楚如何创建一个可重用的页面组件，但离子有一堆混乱的错误 .
我试图 Build 一个页面列表：
<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
Reproduce: 点击 Profiles 图片头像，
Bug ： Headers 模板出现但后退按钮绑定到父 Headers .
Attempts to fix
1.如果你从外面删除 Ion-Header ，它会创建Margin Bug .
2.如果从内部移除 Ion-Header ，则离子按钮的样式会发生变化
我宁愿不使用css修复的兔子洞 . 如何在不破坏离子布局或功能的情况下创建可重复使用的离子页面组件？
1 回答
问题在于我，你实际上是在两次渲染
<ion-header>和<ion-navbar>：你在page-base模板中有它们，其中ng-container包含另一对<ion-header>和<ion-navbar>.所以，我做了什么，并完美地工作：
页面base.html文件：
更改：
至：