在Ionic 2中，如何創建使用離子組件的自定義組件？

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

該指令被渲染，但離子成分不會轉化，所以不會看/工作正常。有時它只適用於Android設備。

我找不到任何這方面的例子。我應該怎麼做？

Answer 1

確保包含您的自定義組件的模塊有：imports: [IonicModule]