Ionic2はコンポーネントセレクタをその内容に置き換えます

Question

私はIonic2とtypescriptを使用しています。 カスタムコンポーネントにイオンメニューの内容を持たせたいとします。

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

しかし、これは開かないメニューを作る...などメニューナビゲーション、CSSを、壊す、次のHTMLをレンダリングします。

<ion-menu> 
     ... 
</ion-menu> 
<ion-nav> 
    ... 
</ion-nav> 

これは、テンプレートコンテンツを持つコンポーネントを交換することはできません：私はのようなものを望んでいた

<sidemenu> 
    <ion-menu> 
     ... 
    </ion-menu> 
</sidemenu> 
<ion-nav> 
    ... 
</ion-nav> 

？ イオンコンポーネントの周りにカスタムコンポーネントを作成するにはどうすればいいですか？

Answer 1

イオン成分の周りにカスタムコンポーネントを作成するにはどうすればよいですか？

このpostの回答を確認してください。そこには、いくつかのページでnavbarためcustom componentを作成する方法と、（必要であれば）、それを変更する方法を見ることができます。

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

EDIT：

それはテンプレートコンテンツにコンポーネントを交換することはできませんか？そのホスト要素を置き換える

ディレクティブ（置き換える：アンギュラ1における真のディレクティブ ）を戦略ドキュメントをアップグレード角度2に角度1を引用するthis post

で述べているだけでTierry Templierよう

は角度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>

のようにそれを使用します