在Ionic 2中,如何创建使用Ionic组件的自定义指令?

时间:2016-01-24 13:21:07

标签: javascript ionic2

创建基本指令很简单:

import {Component} from 'angular2/core';

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

    }
}

这可以按预期工作。但是,如果我想在我的指令中使用Ionic组件,事情就会爆炸。

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() {

    }
}

该指令已呈现,但Ionic组件未被转换,因此不会正常/正常工作。

我找不到任何关于此的例子。我该怎么做?

1 个答案:

答案 0 :(得分:12)

找到答案here

  

您必须导入Ionic组件并将其注册为   &#39;指令&#39;

所以我的第二个例子变成了:

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() {

    }
}