He estado tratando de crear una directiva en ionic y simplemente no funciona y parece que no sé por qué. Quiero que la directiva permita tener la capacidad de cambiar el tamaño automáticamente. Entonces, cuando tiene más texto, simplemente sigue cambiando el tamaño.
Este es mi código: Y mi proyecto es un proyecto iónico 3 que usa angular 4, la nueva versión.
import { Directive, HostListener, ElementRef } from '@angular/core'; @Directive({ selector: '[auto-resize-text-input]' // Attribute selector }) export class AutoResizeTextInput { constructor(public elem: ElementRef) { console.log('Hello AutoResizeTextInput Directive'); } @HostListener('input', ['$event.target']) onInput() { this.resizeTextOnInput(); } private resizeTextOnInput() { this.elem.nativeElement.style.overflow = 'hidden'; this.elem.nativeElement.style.height = 'auto'; this.elem.nativeElement.style.height = this.elem.nativeElement.scrollHeight + "px"; } }Por favor ayuda ????
Yo tuve el mismo problema. La aplicación no reconoció la directiva, pero no dio ningún error. Así que lo eliminé de las decalarations de los módulos principales y lo agregué a las decalarations del módulo de página, que usa la directiva y el problema desapareció.
Si era como yo y necesitaba esta Directiva en varios componentes, así es como la resolví.
Cree un módulo de directives.module.ts compartido llamadodirectivas.module.ts en la misma carpeta que su archivo app.module.ts y agregue su Directiva que está tratando de usar en declarations:[] y exports:[] :
import { NgModule } from '@angular/core'; import { SomeDirective } from './some.directive'; @NgModule({ declarations: [SomeDirective], exports: [SomeDirective] }) export class DirectivesModule {}Ahora importe el módulo de directiva compartida en los módulos que lo necesite:
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { SomePage } from './some'; import { DirectivesModule } from '../../app/directives.module'; @NgModule({ declarations: [ DashboardPage ], imports: [ IonicPageModule.forChild(SomePage), DirectivesModule ] }) export class SomePageModule {}No pude encontrar la respuesta que estaba buscando en ningún otro lugar, espero que ayude.
si coloca su archivo de directiva en la carpeta de componentes. aquí está la respuesta:
mueva su archivo de components/your-directive a directives/your-directive luego reconstrúyalo. ¡Buena suerte!