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

【问题标题】：In Ionic 2, version 3.0.1 how do I create a custom component that uses Ionic components?在 Ionic 2 版本 3.0.1 中，如何创建使用 Ionic 组件的自定义组件？
【发布时间】：2017-09-14 14:03:06
【问题描述】：

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 组件的自定义组件？

【问题讨论】：

我遇到了类似的问题。你有运气吗？
我设法通过导入import {IonicModule} from 'ionic-angular'; 并将这个模块添加到自定义组件模块的导入部分来使其工作。不确定它是否正确，但它有效。

标签： ionic2 components

【解决方案1】：

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

将 IonicModule 添加到 CustomComponentModule 的“imports”参数中
在自定义组件的模板中使用离子组件
将 CustomComponentModule 添加到您想要使用该组件 (CustomComponentModule) 的 AnotherComponentModule 的“imports”参数中。

可删除的.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 {}

这对我有用。

【讨论】：