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

Posted 2023-02-22

【中文标题】在 Ionic 2 中，如何创建使用 Ionic 组件的自定义组件？

【英文标题】：In Ionic 2, how do I create a custom component that uses Ionic components?

【发布时间】：2017-05-01 22:06:25

【问题描述】：

创建一个基本指令很简单：

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 组件未转换，因此无法正常查看/工作。有时它仅适用于安卓设备。

我找不到这方面的任何例子。我该怎么做？

【问题讨论】：

将 改为

【参考方案1】：

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