在自定义组件中使用离子输入 [英] Using ion-input inside custom component

问题描述

我正在尝试在 angular2/ionic2 中创建一个包含输入的自定义组件，代码如下:

I'm trying to create a custom component in angular2/ionic2 which contains an input, here is the code:

import {Component} from "angular2/core";
import {ItemInput} from "ionic-framework/ionic";


@Component({
    directives: [ItemInput],
    selector: "add-input",
    template: `
    <ion-input clearInput>
      <input type="text" value="">
    </ion-input>
  `
})
export class AddInput {
    constructor() { }
}

问题是离子输入似乎在最终页面/视图中被忽略(没有应用样式，甚至无法点击它).如果我将代码按原样移动到主视图，那么它可以工作.向此自定义组件添加类似

The problem is that the ion-input seems to be ignored in the final page/view (no styles applied, can't even click on it). If I move the code as is to the main view, then it works. When adding to this custom component a button like

<button>ok</button> 

并导入 Button(并将其也添加到该组件的指令列表中)这是可行的.所以我不确定是否需要对 ItemInput 组件做一些特殊的事情才能在自定义组件中使用，或者我是否只是遇到了一个错误.

and importing Button (and adding it to the directives list of this component too) this works. So I'm not sure if something special has to be done abot the ItemInput component to be used in a custom component, or if I'm just hitting a bug.

使用离子 2.0 alpha49.

Using ionic 2.0 alpha49.

有什么线索吗?

推荐答案

使用 IONIC_DIRECTIVES 导入离子指令:

Import ionic directives with IONIC_DIRECTIVES:

import {Component} from '@angular/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
    selector: 'add-input',
    template: `
    <ion-input clearInput>
      <input type="text" value="">
    </ion-input>
    `,
    directives: [IONIC_DIRECTIVES]
})

export class AddInput {
  constructor() {}
}

这篇关于在自定义组件中使用离子输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！