如何在 Ionic 3 中创建部件或可重用的页面组件

Question

请谁知道我如何在 ionic 3 中创建部分或类似组件。 我有一个应用程序，它由 5 个页面组成，在每个页面上我必须重复标签。应该有一种方法可以只创建一个文件，并将其放置在那里，然后在需要时需要或包含它，就像在 php、asp 或其他框架中一样。

这是我的代码。

<!-- beginning of header....  -->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>gallery</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openNotifications()">
<ion-icon name="notifications"></ion-icon>
<span class="ncount">5</span>
</button>
</ion-buttons>    
</ion-navbar>
</ion-header>
<!-- end of header ....  -->
<ion-content padding class="body">
<!-- this part changes for every page....  -->
</ion-content>

所以这就是问题所在，我是否无法将整个标题部分保存为 header-comp.htm并要求或将其包含在使用它的每个视图中。 所以我会有这样的东西。

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>gallery</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openNotifications()">
<ion-icon name="notifications"></ion-icon>
<span class="ncount">5</span>
</button>
</ion-buttons>    
</ion-navbar>
</ion-header>
<!-- end of header partial/Component ....  -->

然后在每个页面中，我只需导入标题组件并将正文放在那里，例如，

import('header-comp.html');  //or include('header.html') or ~ something 
<ion-content padding class="body">
<!-- this part changes for every page....  -->
</ion-content>

我知道这里没有什么像导入一样的东西，毕竟 ionic 是基于 Angular 的，如果有人越过这座桥，我现在需要你的帮助，如果有办法，有人怎么能同时更新部分/组件中的变量。

谢谢。

Answer 1

您可以在app.html中实现包括ion-header。我将提供一些有用的代码，我认为这些代码对您有所帮助。

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>gallery</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openNotifications()">
<ion-icon name="notifications"></ion-icon>
<span class="ncount">5</span>
</button>
</ion-buttons>    
</ion-navbar>
</ion-header>
<ion-menu [content]="content">
-----
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>