2017-04-18 34 views
1

In Ionic 2, how do I create a custom directive that uses Ionic components?在Ionic 2 3.0.1版中,如何創建使用離子組件的自定義組件?

此答案無效。

import {IONIC_DIRECTIVES} from 'ionic-angular' 

這也行不通。我如何創建一個使用Ionic 2 3.0.1版中的離子組件的自定義組件?

+0

我正面臨類似的問題。你有沒有運氣? –

+0

我設法通過從'ionic-angular'導入'import {IonicModule};並在自定義組件模塊的imports部分添加此模塊來實現它。不知道它是否正確的方式,但它的工作原理。 –

回答

1

如果你堅持這個問題用延遲加載後,你應該做的是這樣的:

  1. 添加IonicModule爲「進口」 CustomComponentModule的參數
  2. 使用離子定製組件的模板組件
  3. 將CustomComponentModule添加到想要使用該組件的CustomComponentModule的AnotherComponentModule的'imports'參數中。

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 {} 

這是爲我工作。