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