Ionic2 заменить компонентный селектор с его содержимым

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. Там вы можете увидеть, как создать custom component для navbar и как его изменить (если необходимо) на некоторых страницах.

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

EDIT:

Это не возможно заменить компонент с содержанием шаблона?

Так же, как Tierry Templier говорит в this post

Цитирую Угловое 1 угловому 2 Upgrade стратегии документ:

директив, заменяющих их хозяин элемент (заменить: истинные директивы в угловых 1) не поддерживаются в Угловом 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>