相当于角度中的 getElementsByTagName

Question

textarea我正在尝试在一个网页中选择所有内容。

有没有一种方法可以在一个查询中获取所有这些元素，并循环使用 Renderer2 为每个元素添加一个侦听器，以便 renderer.listen在我添加文本时实现垂直自动扩展textarea。

如果我使用 @viewchild，我必须为每个变量手动添加不同的模板引用变量。

是否有可能在角度中拥有类似于 getElementsByTagName 的东西并避免直接访问 DOM ？

Answer 1

指令是您的场景的完美案例。

这不是最终的实现，但应该可以让您很好地了解如何使用它。

import { Directive } from '@angular/core';

@Directive({
  selector: 'textarea[resize]'
})
export class HighlightDirective {

  @HostBinding('style.height.px') 
  height: number;

  @HostListener('change') 
  @HostListener('cut')
  @HostListener('paste')
  @HostListener('drop')
  @HostListener('keydown') 
  onClicked(event: Event) {
    this.resize();
  }

  constructor(private elementRef: ElementRef) {}

  resize() {
    const textArea = this.elementRef.nativeElement as HTMLTextAreaElement;
    this.height = textArea.scrollHeight;
  }
}

在您的模板中装饰您的textarea：

<textarea resize></textarea>