在自定义组件中使用离子输入

Question

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

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

问题是 ion-input 似乎在最后 page/view 中被忽略了（没有应用样式，甚至不能点击它）。如果我将代码按原样移动到主视图，那么它就可以工作。当向这个自定义组件添加一个像

这样的按钮时

<button>ok</button>

并导入 Button（并将其也添加到此组件的指令列表中）这有效。所以我不确定是否必须对要在自定义组件中使用的 ItemInput 组件做一些特殊的事情，或者我是否只是遇到了一个错误。

使用离子 2.0 alpha49。

有什么线索吗？

Answer 1

导入离子指令 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() {}
}

Answer 2

希望得到解答，否则请查看 Creating Custom Components in Ionic2

Answer 3

对于遇到此错误的人：

../node_modules/ionic-angular/index"' has no exported member 'IONIC_DIRECTIVES'

在 Ionic 3 中，指令声明已更改。组件不包含指令，模块将离子指令绑定到组件。在你的模块 IonicPageModule.forChild(MyComponent):

中使用它

import { IonicModule; IonicPageModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyComponent } from '../directives/my-directive/my-directive';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    IonicPageModule.forChild(MyComponent) // Here
  ],
  declarations: [MyApp, MyComponent]
})

在此处挖掘答案：https://github.com/ionic-team/ionic/blob/master/src/module.ts

希望这对您有所帮助，干杯！

在自定义组件中使用离子输入

Using ion-input inside custom component

ionic2

angular