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

【问题标题】：Using ion-input inside custom component在自定义组件中使用离子输入
【发布时间】：2016-04-23 07:28:11
【问题描述】：

我正在尝试在 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() { }
}

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

的按钮时

<button>ok</button>

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

使用离子 2.0 alpha49。

有什么线索吗？

【问题讨论】：

标签： angular ionic2

【解决方案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() {}
}

【讨论】：

我在尝试时遇到此错误...（发行版）[ts] Module '"c:/.../node_modules/ionic-angular/index"' has no exported member 'IONIC_DIRECTIVES'.

【解决方案2】：

希望它的回答，否则看看Creating Custom Components in Ionic2

【讨论】：

死链接，请修复

【解决方案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

希望这会有所帮助，干杯！

【讨论】：