首页 文章

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

提问于
浏览 次
4

我正在尝试在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

3 回答

  • 0

    使用 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() {}
}
    回复于
  • 7

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

    回复于
  • 1

    对于收到此错误的人：

    ../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

    希望这会有所帮助，欢呼！

    回复于

相关问题