等效于角度的 getElementsByTagName答案

【问题标题】：Equivalent of getElementsByTagName in angular等效于角度的 getElementsByTagName
【发布时间】：2018-06-22 07:51:41
【问题描述】：

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

有没有办法在一个查询中获取所有这些元素并循环遍历它们以使用Renderer2 renderer.listen 为每个元素添加一个侦听器，以便在我添加文本时实现vertical auto expand of the textarea。

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

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

【问题讨论】：

标签： angular textarea

【解决方案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>

【讨论】：

我认为您正在使用对 Dom 的直接访问？但会看的。
（HostBinding 的修订答案）ElementRef 让您可以访问 DOM 中的本机元素，在这种情况下，您需要它，因为 Angular 当前为 cannot read DOM properties。
最初滚动条是可见的，所以我添加了overflow-y:hidden，但现在我必须计算textarea 内的初始行数以设置行数的初始值.. . 否则会有很多行被隐藏。
这个指令看起来不错，只是第一次在textarea 中输入上一行时出现的一个小问题，有点上，每当我删除一行或删除一个字母时，上一行完全显示在里面，不知道为什么，可能是我们必须捕获鼠标向下或其他东西......但我也添加了overflow-y: hidden，否则我一直看到滚动
好像加上@HostListener('keyup') onkeyup(event: Event) { this.resize(); }会好一点。