Question

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

有没有办法在一个查询中获取所有这些元素并循环遍历它们，以便使用Renderer2 renderer.listen向每个元素添加一个监听器，以便每当实现一个vertical auto expand of the 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>

角度中等效的getElementsByTagName

1 个答案: