angular2動的html挿入ディレクティブを使用して

Question

コンポーネントを使用してhtmlを挿入しようとしています。新しく作成されたHTML要素をバインドする必要があります。以下は私のコードスニペットです。

ユーザーがテキストエリアにテキストを入力しようとするたびに、テキストエリアはスクロールバーなしで拡大する必要があります。フォーカスアウト時には、showmoreボタンとともに指定の高さまたは初期高さに収縮する必要があります。 showmoreボタンをクリックすると、showFull関数が呼び出されます。

import {HostListener, Directive } from "@angular/core"; 

@Directive({ 
    selector: 'textarea[autoGrow]', 
}) 

export class AutoGrowDirective { 
    @HostListener('input', ['$event.target']) 
    onInput(inputElement: HTMLTextAreaElement): void { 
     this.growHeight(inputElement); 
    } 


@HostListener('focusout', ['$event.target']) 
onFocusout(inputElement: HTMLTextAreaElement): void { 
    this.shrinkHeight(inputElement); 
} 
@HostListener('focus', ['$event.target']) 
onFocus(inputElement: HTMLTextAreaElement): void { 
    this.showFull(inputElement); 
} 
private initialHeight: number = 0; 
public growHeight(textArea:HTMLTextAreaElement): void { 
    textArea.style.overflow = "hidden"; 
    this.setInitialHeight(textArea.offsetHeight); 
    if(textArea.value.trim() == ""){ 
     textArea.style.height = "100px"; 
    } else if(textArea.scrollHeight > textArea.offsetHeight){ 
     textArea.style.height = (textArea.scrollHeight+10) + "px"; 
    } 
} 
public shrinkHeight(textArea:HTMLTextAreaElement): void { 
    if(textArea.scrollHeight > this.initialHeight){ 
     let button: HTMLElement = document.createElement('button'); //, {id: 'textareaHeightChange', class: 'btn', type:""} 
     button.id = 'textareaHeightChange'; 
     button.className = 'btn'; 
     button.textContent = 'Show More'; 
     // button.onclick = this.showFull2(); // on click invoke a function 
     console.info(button); 
     textArea.insertAdjacentElement('afterend',button); // insert this button only once 
     // <button id="textareaHeightChange" class="btn" type="">Show More</button> 

    } 
    textArea.style.height = this.initialHeight + "px"; 
    textArea.style.overflow = "hidden"; 
} 

public showFull(textArea:HTMLTextAreaElement): void { 
    textArea.style.height = textArea.scrollHeight + "px"; 
} 

private setInitialHeight(height:number):void { 
    if(this.initialHeight == 0) 
     this.initialHeight = height; 
} 
private getInitialHeight(): number{ 
    if(this.initialHeight != 0) 
     return this.initialHeight; 
} 

誰かに私に軽いものを投げてください。私は最後の2日間から立ち往生しています。クラスとディレクティブ の

Answer 1

テイクの使用は、クラスがあなたのテキスト領域 を成長させるCSSで.auto-成長し、次のディレクティブが焦点にこのクラスを追加し、フォーカスやぼかし上を取り除くことにそのクラスを削除します作成します。

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core'; 
@Directive({ 
    selector: '[autoGrow]', 
}) 

export class AutoGrowDirective { 
    private el: ElementRef; 
    constructor(private _el: ElementRef, public renderer: Renderer) { 
     this.el = this._el; 
    } 

    @HostListener('focus', ['$event']) onFocus(e) { 
     this.renderer.setElementClass(this._el.nativeElement, 'auto-grow', true); 
     return; 
    } 
    @HostListener('blur', ['$event']) onblur(e) { 
     this.renderer.setElementClass(this._el.nativeElement, 'auto-grow', false); 
     return; 
    } 

}