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

Question

In Ionic 2, how do I create a custom directive that uses Ionic components?

这个答案不再适用了。

import {IONIC_DIRECTIVES} from 'ionic-angular' 

这也行不通。如何在Ionic 2 3.0.1版中创建使用Ionic组件的自定义组件？

Answer 1

如果您在使用延迟加载后遇到此问题，则应该这样做：

1. 将IonicModule添加到CustomComponentModule的“imports”参数
2. 在自定义组件的模板中使用离子组件
3. 将CustomComponentModule添加到要使用该组件的AnotherComponentModule的“imports”参数（CustomComponentModule）。

deletable.module.ts

import { NgModule } from '@angular/core';
import { DeletableItem } from './deletable';
import { IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [
    DeletableItem
  ],
  imports: [
    IonicModule
  ],
  exports: [
    DeletableItem
  ]
})
export class DeletableModule {}

bill.html

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <ion-label text-right>{{bill.amount}}</ion-label>
      <deletableItem></deletableItem>
    </ion-item>
  </ion-list>
</ion-content>

bill.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BillPage } from './bill';

import { DeletableModule } from './../../components/deletable/deletable.module'

@NgModule({
  declarations: [
    BillPage
  ],
  imports: [
    IonicPageModule.forChild(BillPage),
    DeletableModule
  ],
  exports: [
    BillPage
  ]
})
export class BillModule {}

这对我有用。