angular2 dynamic html inserting using директива

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; 
} 

Пожалуйста, бросьте мне некоторые огни. Я застрял с последних двух дней.

Answer 1

Прими использование класса и директив создать класс .auto вырастал с CSS, чтобы выращивать область текста и следующая директива будет добавить этот класс в центре внимания и удалить этот класс на удаление фокуса или на размытость.

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; 
    } 

}