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

Posted 2023-02-23

【中文标题】Ionic2 用其内容替换组件选择器

【英文标题】：Ionic2 replace component selector with its content

【发布时间】：2016-10-24 01:17:37

【问题描述】：

我正在使用 Ionic2 和打字稿。 假设我想要一个自定义组件具有离子菜单的内容。

<sidemenu></sidemenu> //this sidemenu will hold the ion.menu.

<ion-nav id="nav"
         [root]="rootPage"
         #content
         swipe-back-enabled="false">
</ion-nav>

侧边菜单模板：

<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】：

如何围绕离子组件创建自定义组件？

请在post 中查看我的答案。在那里您可以看到如何为navbar 创建custom component 以及如何在某些页面中修改它（如果需要）。

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

编辑：

不能用模板内容替换组件吗？

就像Tierry Templier 在this post 中所说的那样

引用 Angular 1 到 Angular 2 升级策略文档：

替换其宿主元素的指令（替换：真正的指令 在 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 建议的解决方法一样，您可以在组件中使用选择器，例如

[myComponent]

然后像这样使用它

<div myComponent>Hello My component</div>

或[my-component]，然后像<div my-component>Hello My component</div>一样使用它