Question

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

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

Answer 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]
一样使用它

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

1 个答案: