ionic3 textarea 自适应指令（实用、赞、改良版）

喜欢ヅ旅行 2023-06-16 15:54 19阅读 0赞

参考：[https://blog.csdn.net/chelen\_jak/article/details/103201459][https_blog.csdn.net_chelen_jak_article_details_103201459]

解决问题：  
       数据异步加载时无法实现TextArea的自动高度，只能通过输入时才会自动高度。

解决方法：  
       引用ngDoCheck事件代规input事件

具体代码：

import { Directive, HostListener, ElementRef, Input, DoCheck } from '@angular/core';
    
    @Directive({
        selector: 'ion-textarea[autosize]' // Attribute selector
    })
    export class AutosizeDirective implements DoCheck {
        //@HostListener('input', ['$event.target'])
        //onInput(textArea: HTMLTextAreaElement): void {
        //    this.adjust();
        //}
    
        @Input('autosize') maxHeight: number;
    
        private ele: any;
        private oldValue: string = "";
    
        constructor(public element: ElementRef
        ) {
            //
        }
    
        ngOnInit(): void {
            setTimeout(() => {
                //必须放在setTimeout中才能有值
                this.ele = this.element.nativeElement.querySelector("textarea");
            }, 0);
        }
    
        ngDoCheck(): void {
            if (this.ele) {
                let newValue = this.ele.value || "";
                if (this.oldValue != newValue) {
                    this.oldValue = newValue;
                    this.adjust()
                }
            }
        }
    
        private adjust(): void {
            let ta = this.ele;
            let newHeight: number;
    
            ta.style.overflow = "hidden";
            ta.style.height = "auto";
    
            if (this.maxHeight) {
                newHeight = Math.min(ta.scrollHeight, this.maxHeight);
            }
            else {
                newHeight = ta.scrollHeight;
            }
    
            ta.style.height = newHeight + "px";
        }
    }

[https_blog.csdn.net_chelen_jak_article_details_103201459]: https://blog.csdn.net/chelen_jak/article/details/103201459