2016-05-24 12 views
3

流体テキスト領域を作成しようとしていますが、DOM操作を行う「角2ウェイ」を使用するときに高さを設定できません。角2のディレクティブを使用している要素に高さが設定されていません

コンポーネント:

import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core'; 

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

export class FluidHeightDirective { 

    constructor(private _elementRef: ElementRef) {} 

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

    setHeight() { 
    this.height = this._elementRef.nativeElement.scrollHeight + 'px'; 
    } 
} 

マークアップ:

<textarea [(ngModel)]="model" fluidHeight></textarea> 

なぜそれが私がsetHeight機能で正しい値を取得しますが、高さがtextareaに設定されていないということでしょうか?

答えて

2

あなたは

@HostBinding('style.height.px') 

.pxを使用している場合は、ない

@HostBinding('style.height') 

または

のいずれかを使用し

this.height = this._elementRef.nativeElement.scrollHeight + 'px'; 

もここでそれを追加する必要があります
this.height = this._elementRef.nativeElement.scrollHeight; 
+0

これは、テキストがテキストエリアの高さに達するまで、すべてのキーストロークでテキストエリアが縮小する理由を示しています。 – Chrillewoodz

+0

毎回2ピクセルずつ減少し、超奇妙です。 – Chrillewoodz

+0

奇妙な音。調査できるプランナーを設置してください。 –

関連する問題