angular2动态html插入使用指令

Question

我试图使用组件插入html，我需要绑定新创建的HTML元素。 以下是我的代码段。

每当用户尝试向textarea输入文本时，textarea应该在没有任何滚动条的情况下增长，当焦点输出时，它必须缩小到给定的高度或初始高度以及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

使用class和directive创建一个带有css的类.auto-grow来增长你的文本区域，下面的指令将在焦点上添加这个类，并在删除焦点或模糊时删除该类。

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

}