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

In Ionic 2, how do I create a custom directive that uses Ionic components?(在 Ionic 2 中,如何创建使用 Ionic 组件的自定义指令?)
本文介绍了在 Ionic 2 中,如何创建使用 Ionic 组件的自定义指令?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

创建一个基本指令很简单:

Creating a basic directive is simple:

import {Component} from 'angular2/core';

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

    }
}

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

This works as expected. However, if I want to use Ionic components in my directive things blow up.

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 组件未转换,因此无法正常查看/工作.

The directive is rendered, but Ionic components are not transformed, and so wont look/work properly.

我找不到这方面的任何例子.我该怎么做?

I can't find any examples on this. How should I do this?

推荐答案

找到答案 这里:

您必须导入 Ionic 组件并将它们注册为'指令'

You have to import the Ionic components and register them as 'directives'

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

So my second example becomes:

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

    }
}

这篇关于在 Ionic 2 中,如何创建使用 Ionic 组件的自定义指令?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

How do I can get a text of all the cells of the table using testcafe(如何使用 testcafe 获取表格中所有单元格的文本)
node_modules is not recognized as an internal or external command(node_modules 未被识别为内部或外部命令)
How can I create conditional test cases using Protractor?(如何使用 Protractor 创建条件测试用例?)
PhantomJS and clicking a form button(PhantomJS 并单击表单按钮)
Clicking #39;OK#39; on alert or confirm dialog through jquery/javascript?(在警报上单击“确定或通过 jquery/javascript 确认对话框?)
QunitJS-Tests don#39;t start: PhantomJS timed out, possibly due to a missing QUnit start() call(QunitJS-Tests 不启动:PhantomJS 超时,可能是由于缺少 QUnit start() 调用)