2016-01-24 54 views
12

創建基本指令很簡單:在Ionic 2中,如何創建使用離子組件的自定義指令?

import {Component} from 'angular2/core'; 

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

    } 
} 

可正常工作。但是,如果我想在我的指令中使用離子組件,事情就會爆炸。

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-component', 
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>' 
}) 
export class MyComponent { 
    constructor() { 

    } 
} 

指令被渲染,但離子組件不會被轉換,所以不會看起來/正常工作。

我找不到任何這方面的例子。我應該怎麼做?

+0

如果您覺得這個問題缺乏某種方式,請留下評論,而不是隻是downvoting。 – Schlaus

+0

我不確定爲什麼你放棄了投票。很好的問題,正是我需要的。 +1 –

回答

12

找到了答案here

您必須導入離子成分,並把它們註冊爲 '指令'

所以我的第二個例子就變成:

import {Component} from 'angular2/core'; 
import {List, Item} from 'ionic/ionic'; 

@Component({ 
    selector: 'my-component', 
    directives: [List, Item], 
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>' 
}) 
export class MyComponent { 
    constructor() { 

    } 
} 
+5

此外,您可能只想從'ionic-angular'導入所有指令'import {IONIC_DIRECTIVES};' –

+2

您還可以嘗試使用離子指令'ionic g directive directive_name'。 – Senthil