我正在尝试在angular2 / ionic2中创建一个包含输入的自定义组件,这里是代码:
if
问题是在最终页面/视图中似乎忽略了离子输入(没有应用样式,甚至无法点击它)。如果我将代码移动到主视图,那么它的工作原理。向此自定义组件添加类似
的按钮时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(并将其添加到此组件的指令列表中)也可以。所以我不确定是否需要特别注意要在自定义组件中使用的ItemInput组件,或者我是否只是遇到错误。
使用离子2.0 alpha49。
任何线索?
答案 0 :(得分:7)
使用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() {}
}
答案 1 :(得分:1)
希望它回答,否则看看Creating Custom Components in Ionic2
答案 2 :(得分:0)
对于收到此错误的人:
../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
希望这有帮助,欢呼!