2017-02-20 43 views
0

結合我有這個指令取決於其含量設定了一個textarea流體高度:角2檢測變爲只讀輸入的[ngModel]在指令

@Directive({ 
    selector: '[fluidHeight]', 
    host: { 
    '(ngModelChange)': 'setHeight()' 
    } 
}) 

export class FluidHeightDirective implements AfterViewInit { 

    constructor(private elementRef: ElementRef) {} 

    ngAfterViewInit() { 
    this.setHeight(); 
    } 

    @HostBinding('style.height.px') 
    height: number; 

    setHeight() { 
    console.log(true) 
    this.height = this.elementRef.nativeElement.scrollHeight; 
    } 
} 

但是我不能讓它

<textarea [ngModel]="foo" fluidHeight readonly></textarea> 

還有一個textarea的這改變了readonly輸入的內容:當我使用[ngModel]readonly一起工作。

我試過使用ngModelChange,changeinput但他們都沒有工作。

有誰知道如何做到這一點?

+0

是'foo'您的內容? – Dinistro

+0

@Dinistro是的。 – Chrillewoodz

回答

1

setter是應該做的伎倆:

export class FluidHeightDirective implements AfterViewInit { 

    @Input('fluidHeight') 
    set content(content:any) { 
     this.setHeight(); 
    } 

    constructor(private elementRef: ElementRef) {} 

    ngAfterViewInit() { 
     this.setHeight(); 
    } 

    @HostBinding('style.height.px') 
    height: number; 

    setHeight() { 
     console.log(true); 
     this.height = this.elementRef.nativeElement.scrollHeight; 
    } 
} 
+1

我最終得到了一個輸入ngModel的輸入,這個輸入基本上與此相同。你不需要setter來使它實際工作。 – Chrillewoodz

+0

@Chrillewoodz不錯的一個:) – Dinistro