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

Question

请问谁知道如何在离子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>

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

谢谢。

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>