Ionic 2では、Ionicコンポーネントを使用するカスタムコンポーネントを作成するにはどうすればよいですか？基本的なディレクティブを作成

Question

は単純です：予想通り

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-component', 
    template: '<div>Hello!</div>' 
}) 
export class MyComponent { 
    constructor() { 

    } 
} 

これは動作します。しかし、私の指示にイオン成分を使用したい場合は、物事が爆発します。

@Component({ 
    selector: 'nl-navbar', 
    template: ` 
     <ion-header> 
      <ion-navbar color="primary"> 
      <button ion-button menuToggle> 
       <ion-icon name="menu"></ion-icon> 
      </button> 
      <ion-title > 
       <span>Complaints</span> 
      </ion-title> 
      <ion-buttons *ngIf="!hideCreateButton" end> 
       <button ion-button class="navBtnRight" (click)="openPopover($event)"> 
       <ion-icon name="md-more"></ion-icon> 
       </button> 
      </ion-buttons> 
      </ion-navbar> 
     </ion-header> 
    `, 
    inputs: ['hideCreateButton'] 
}) 

export class CustomNavbar { 

    public hideCreateButton: string; 

    constructor(public popoverCtrl: PopoverController) { 
    } 

    createNew(): void { 
     // this.nav.setRoot(CreateNewPage, {}, { animate: true, direction: 'forward' }); 
    } 

    openPopover(myEvent) { 
     let popover = this.popoverCtrl.create(PopoverPage); 
     popover.present({ 
     ev: myEvent 
     }); 
    } 
} 

次のようにカスタムナビゲーションバーを使用して：

<nl-navbar [hideCreateButton]="hidebutton()"></nl-navbar> 

と私のTSファイルは次のようになります。

private hideCreateButton: boolean = false; 

    public hidebutton(): boolean { 
    return this.hideCreateButton; 
    } 

ので、文句を言わないディレクティブがレンダリングされますが、イオン性コンポーネントが変換されず、見て/正しく動作します。時にはアンドロイドデバイスでのみ動作します。

私はこれに関する例を見つけることができません。私はこれをどのようにするべきですか？

Answer 1

カスタムコンポーネントが含まれているモジュールを持っていることを確認してください：imports: [IonicModule]