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>

我知道这里没有像导入一样的东西，毕竟离子是基于角度的，如果有人过了这座桥，请现在我需要您的帮助，并且如果有办法，有人可以如何更新零件/组件中的变量同时。

谢谢。

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>

如何在ionic 3中创建部分或可重复使用的页面组件

1 个答案: