Javascript 使用指令的angular 2动态html插入

我正在尝试使用组件插入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;
}

import{HostListener，Directive}来自“@angular/core”；
@指示({
选择器：“文本区域[自动增长]”，
})
导出类自动增长指令{
@HostListener（'输入'，['$event.target']））
onInput（inputElement:HTMLTextAreaElement）：无效{
此.growtheight（inputElement）；
}
@HostListener（'focusout'，['$event.target']））
onFocusout（inputElement:HTMLTextAreaElement）：无效{
此。收缩高度（inputElement）；
}
@HostListener（'焦点'，['$event.target']））
onFocus（inputElement:HTMLTextAreaElement）：无效{
此.showFull（输入元素）；
}
私有初始高度：数字=0；
公共增长高度（textArea:HTMLTextAreaElement）：无效{
textArea.style.overflow=“隐藏”；
此.setInitialHeight（textArea.offsetHeight）；
如果（textArea.value.trim（）=“”）{
textArea.style.height=“100px”；
}else if（textArea.scrollHeight>textArea.offsetHeight）{
textArea.style.height=（textArea.scrollHeight+10）+“px”；
}
}
公共收缩高度（textArea:HTMLTextAreaElement）：无效{
如果（textArea.scrollHeight>this.initialHeight）{
let button:HTMLElement=document.createElement（'button'）；/，{id:'textareaHeightChange'，类：'btn'，类型：'}
button.id='textareaHeightChange'；
button.className='btn'；
button.textContent='显示更多'；
//button.onclick=this.showFull2（）；//单击调用函数
控制台信息（按钮）；
textArea.insertAdjacentElement（'afterend'，button）；//仅插入此按钮一次
//显示更多
}
textArea.style.height=this.initialHeight+“px”；
textArea.style.overflow=“隐藏”；
}
public showFull（textArea:HTMLTextAreaElement）：无效{
textArea.style.height=textArea.scrollHeight+“px”；
}
私有设置初始高度（高度：编号）：无效{
如果（this.initialHeight==0）
此参数。初始高度=高度；
}
私有getInitialHeight（）：编号{
如果（this.initialHeight！=0）
返回此参数。初始高度；
}

}

请有人给我一些灯。我从过去两天就被困住了

提前谢谢