Ionic2用其内容替换组件选择器

时间:2016-06-22 08:13:18

标签: typescript angular components ionic2

我正在使用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>

无法用模板内容替换组件? 如何在离子组件周围创建自定义组件?

1 个答案:

答案 0 :(得分:1)

  

如何在离子组件周围创建自定义组件?

请在此post中查看我的回答。在那里,您可以看到如何为e(".sub-nav").unbind("click").bind("touchend click", function(t) { t.preventDefault(), e.sidr("close") }) 创建custom component以及如何在某些页面中修改它(如果需要)。

=============================================== ==

修改

  

无法用模板内容替换组件?

就像在Tierry Templier

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]

一样使用它