在Ionic 2中,如何创建使用Ionic组件的自定义组件?

时间:2016-12-16 06:53:15

标签: ionic-framework ionic2 angular2-directives angular2-components

创建基本指令很简单:

import {Component} from 'angular2/core';

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

    }
}

这可以按预期工作。但是,如果我想在我的指令中使用Ionic组件,事情就会爆炸。

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

该指令已呈现,但Ionic组件未被转换,因此不会正常/正常工作。有时它只适用于Android设备。

我找不到任何关于此的例子。我该怎么做?

1 个答案:

答案 0 :(得分:2)

确保包含自定义组件的模块具有:imports: [IonicModule]