2017-04-12 62 views
2

我一直试图在离子中创建一个指令,它只是不工作,我似乎不知道为什么。 我希望指令允许自动调整自身的大小。所以当它有更多的文本时,它只是不断调整大小。Ionic 3指令不工作

这是我的代码: 而我的项目是一个离子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"; 
    } 
} 

请帮助????

+0

嗨,你找到了解决方案吗? – Yasir

+0

还没有找到任何解决方案,前往离子论坛问,仍然没有解决方案 –

+0

希望你可以在这里找到答案 - https://chat.stackoverflow.com/rooms/153499/ionic-3 –

回答

0

如果你把你的指令文件放在components文件夹中。这里是答案:

components/your-directive 将您的文件 directives/your-directive 然后重建。祝你好运!

+0

它是真实的在一个指令文件夹中,不知道什么是错误的,代码看起来对我来说很不错, –

+1

就像你在离子3中知道的任何页面中有一个文件page.module.ts。当你想使用任何组件,指令..你必须在这里导入你的指令 –

+0

@BitaHo答案应该工作。我从app.module.ts中删除了导入并将其添加到page.module.ts文件中,并且该指令开始工作。 – Landen

3

我有同样的问题。该指令没有被应用程序识别,但它没有给出任何错误。所以我将它从主模块'decalarations中删除,并添加到页面模块'decalarations,它使用该指令并且问题消失了。

+0

适用于我 - 将指令声明移至组件的模块.ts也适用于我。 – eugene

0

也许这将帮助你:

如果您使用的指令在组件,导入directives.module.tsapp.module.tscomponents.module.ts或导入它在app.module.ts使用您的指令,在页面中。