请谁知道我如何在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>
我知道这里没有像导入一样的东西,毕竟离子是基于角度的,如果有人过了这座桥,请现在我需要您的帮助,并且如果有办法,有人可以如何更新零件/组件中的变量同时。
谢谢。
答案 0 :(得分: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>