Javascript 使用指令的angular2动态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）
返回此参数。初始高度；
}

---

请有人给我扔几盏灯。我从过去两天就被卡住了。

利用课堂和指令 创建一个类。使用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;
    }

}

---

使用类和指令 创建一个类。使用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;
    }

}

---

当您的问题是关于Angular2时，请停止使用

angularjs

标记。任何人都可以告诉我如何绑定动态插入的按钮，即let-button:HtmleElement=document.createElement（'button'）；/，{id:'textareaHeightChange'，class:'btn'，type:'button.id='textareaHeightChange'；button.className='btn'；button.textContent='Show More'；//button.onclick=this.showFull2（）；//点击调用函数控制台。信息（按钮）；textArea.insertAdjacentElement（'afterend'，按钮）；当您的问题是关于Angular2时，请停止使用

angularjs

标记。任何人都可以告诉我如何绑定动态插入的按钮，即let-button:HtmleElement=document.createElement（'button'）；/，{id:'textareaHeightChange'，class:'btn'，type:'}button.id='textareaHeightChange'；button.className='btn'；button.textContent='Show More'；//button.onclick=this.showFull2（）；//点击调用函数控制台。信息（按钮）；textArea.insertAdjacentElement（'afterend'，按钮）；我能够实现该功能，但当用户关注时，我需要使用指令在文本区域旁边添加一个按钮或链接并将其绑定，就像用户单击按钮或链接调用指令中的方法一样（showFull），隐藏按钮或链接。当用户向外聚焦时，再次显示按钮或链接。我能够实现功能，但当用户向外聚焦时，我需要使用指令在文本区域旁边添加按钮或链接并将其绑定，就像用户单击按钮或链接时调用指令中的方法一样（showFull），隐藏按钮或链接。当用户聚焦时，再次显示按钮或链接。