2

創建基本指令很簡單:在Ionic 2中,如何創建使用離子組件的自定義組件?

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設備。

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

+0

變化<離子圖標名稱=「MD-更多」>到<離子圖標名稱=「更多」> –

回答

2

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

相關問題