如何在不更改变量的情况下使用角度插值绑定自动在 span/div 元素中换行（仅垂直调整大小，添加高度）

Answer 1

由于没有人回答我这个问题，我将给出一种可能的解决方案：使用带有指令的文本区域来控制其调整大小，而不是使用可内容编辑的跨度！

指令源代码：

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[textAreaAutoResize]'
})
export class TextareaAutoresizeDirective implements OnInit {
  
  @HostListener(':input')
  onInput() {
    this.resize();
  }

  constructor(private elementRef: ElementRef) { }

  resize() {
    this.elementRef.nativeElement.style.height = 'auto';
    this.elementRef.nativeElement.style.height = this.elementRef.nativeElement.scrollHeight + 'px';
  }

  
  ngOnInit() {
    if (this.elementRef.nativeElement.scrollHeight) {
      setTimeout(() => this.resize());
    }
  }
}

替换原始文本区域的示例文本区域（内容可编辑范围）

<textarea class= "field-name-label" #FieldNameLabel textAreaAutoResize role="textbox">{{example.value}}</textarea>

如果有人有使用普通元素（如（“span”、“div”、“p”等）和“contenteditable”）的解决方案，这些元素能够根据角度绑定变量调整大小，欢迎您在下面发布。