我正在使用Ionic2和打字稿。 让我们假设我想要一个自定义组件来获取离子菜单的内容。
<sidemenu></sidemenu> //this sidemenu will hold the ion.menu.
<ion-nav id="nav"
[root]="rootPage"
#content
swipe-back-enabled="false">
</ion-nav>
sidemenu模板:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>{{ 'HELLO' | translate }}</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item
*ngFor="let p of DataMenu"
(click)="openPage(p)">
{{p.Title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
但这将呈现以下html,打破菜单导航,css等...使菜单无法打开。
<sidemenu>
<ion-menu>
...
</ion-menu>
</sidemenu>
<ion-nav>
...
</ion-nav>
当我想要这样的东西时:
<ion-menu>
...
</ion-menu>
<ion-nav>
...
</ion-nav>
无法用模板内容替换组件? 如何在离子组件周围创建自定义组件?
答案 0 :(得分:1)
如何在离子组件周围创建自定义组件?
请在此post中查看我的回答。在那里,您可以看到如何为e(".sub-nav").unbind("click").bind("touchend click", function(t) {
t.preventDefault(), e.sidr("close")
})
创建custom component
以及如何在某些页面中修改它(如果需要)。
=============================================== ==
修改强>
中this post所说的那样无法用模板内容替换组件?
引用Angular 1到Angular 2升级策略doc:
替换其主机元素的指令(替换:true指令 在Angular 1)Angular 2 不支持。在许多情况下这些 指令可以升级到常规组件指令。在 事实上,这取决于你想做什么,你需要意识到这一点 Angular2支持几件事:
属性指令 - 请参阅 https://angular.io/docs/ts/latest/guide/attribute-directives.html
结构指令 - 见 https://angular.io/docs/ts/latest/guide/structural-directives.html
因此,在您的情况下,就像Günter Zöchbauer建议的解决方法一样,您可以在组件中使用选择器,例如
navbar
然后像
一样使用它[myComponent]
或<div myComponent>Hello My component</div>
然后像[my-component]