2017-04-12 60 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使用您的指令,在頁面中。