Eu estou tentando criar um componente personalizado em angular2 / ionic2 que contém uma entrada, aqui está o código:
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() { }
}
O problema é que a entrada de íons parece serignorado na página final / view (sem estilos aplicados, nem consigo clicar nele). Se eu mover o código como está para a visualização principal, então ele funciona. Ao adicionar a este componente personalizado um botão como
<button>ok</button>
e importando o botão (e adicionando-o aolista de diretivas deste componente também) isso funciona. Então, eu não tenho certeza se algo especial deve ser feito sobre o componente ItemInput para ser usado em um componente personalizado, ou se eu estou apenas acertando um bug.
Usando 2.0 alpha49 iônico.
Alguma pista?
Respostas:
7 para resposta № 1Importe diretivas iônicas com 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 para resposta № 2
Espero que seja respondida, caso contrário, dê uma olhada Criando componentes personalizados no Ionic2
0 para resposta № 3
Para as pessoas que recebem este erro:
../node_modules/ionic-angular/index"" has no exported member "IONIC_DIRECTIVES"
Dentro Ionic 3, a declaração da diretiva mudou. O componente não inclui a diretiva, o módulo vincula as diretivas iônicas ao componente. Use isso no seu módulo 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]
})
Encontrei a resposta cavando aqui: https://github.com/ionic-team/ionic/blob/master/src/module.ts
Espero que isso ajude, vivas!