/ / Uso de entrada de íons dentro de componente personalizado - angular, ionic2

Usando entrada de íons dentro do componente personalizado - angular, ionic2

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 № 1

Importe 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!