angular - 等效于angular中的getElementsByTagName

我试图在一个网页中选择所有textarea。
有没有一种方法可以在一个查询中获取所有这些元素，并对它们进行循环以使用Renderer2renderer.listen将侦听器添加到每个元素，以便在添加文本时实现vertical auto expand of the textarea。
如果使用@viewchild，则必须手动为每个模板添加不同的模板引用变量。
有没有可能在角度上与getelementsbytagname类似，并避免直接访问dom？

最佳答案

指令对于您的场景来说是一个完美的案例。
这不是最终的实现，但应该能让您更好地了解如何使用它。

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>

关于angular - 等效于angular中的getElementsByTagName，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48233234/