Question

我一直试图在离子中创建一个指令，它只是不起作用，我似乎不知道为什么。我希望指令允许自动调整大小。因此，当它有更多文本时，它就会不断调整大小。

这是我的代码：我的项目是一个离子3项目，使用角度4，新版本。

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";
  }
}

请帮忙????

Answer 1

我遇到了同样的问题。该指令未被应用程序识别，但它没有给出任何错误。所以我把它从主要模块中移除了＃39; decalarations并添加到页面模块＆＃39; decalarations，它使用该指令，问题就消失了。

Answer 2

如果您像我一样，并且需要针对多个组件的此指令，那么我将通过以下方式解决它。

在与directives.module.ts文件相同的文件夹中创建名为app.module.ts的共享DirectiveModule，并在declarations:[]和exports:[]下添加要使用的Directive：

import { NgModule } from '@angular/core';
import { SomeDirective } from './some.directive';

@NgModule({
  declarations: [SomeDirective],
  exports: [SomeDirective]
})
export class DirectivesModule {}

现在将共享指令模块导入您需要的模块中：

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 {}

我在其他任何地方都找不到答案，希望对您有所帮助。

Answer 3

如果您将指令文件放在components文件夹中。这里是答案：

移动您的文件 components/your-directive 至 directives/your-directive 然后重建它。祝你好运！

离子3指令不起作用

3 个答案: