Wie erstelle ich in Ionic 2 eine benutzerdefinierte Komponente, die Ionic-Komponenten verwendet?

Question

eine grundlegende Richtlinie zu erstellen ist einfach:

import {Component} from 'angular2/core'; 

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

    } 
} 

Dies funktioniert wie erwartet. Wenn ich jedoch in meiner Richtlinie ionische Komponenten verwenden möchte, explodieren die Dinge.

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

mit benutzerdefinierten navbar wie folgt aus:

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

und meine ts-Datei sieht wie folgt aus:

private hideCreateButton: boolean = false; 

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

Die Richtlinie gemacht wird, aber ionische Komponenten nicht transformiert werden, und so wird nicht schau/arbeite richtig. Manchmal funktioniert es nur in Android-Geräten.

Ich kann keine Beispiele dazu finden. Wie soll ich das machen?

Answer 1

Vergewissern Sie sich, dass das Modul, das die benutzerdefinierte Komponente enthält, hat: imports: [IonicModule]