在 Ionic 2 中,如何创建使用 Ionic 组件的自定义指令?
In Ionic 2, how do I create a custom directive that uses Ionic components?
创建基本指令很简单:
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 组件未转换,因此不会 look/work 正确。
我找不到这方面的任何例子。我应该怎么做?
找到答案here:
You have to import the Ionic components and register them as
'directives'
所以我的第二个例子变成了:
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() {
}
}
创建基本指令很简单:
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 组件未转换,因此不会 look/work 正确。
我找不到这方面的任何例子。我应该怎么做?
找到答案here:
You have to import the Ionic components and register them as 'directives'
所以我的第二个例子变成了:
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() {
}
}