等效于角度的 getElementsByTagName

Posted 2023-05-07

【中文标题】等效于角度的 getElementsByTagName

【英文标题】：Equivalent of getElementsByTagName in angular

【发布时间】：2018-06-22 07:51:41

【问题描述】：

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

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

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

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

【参考方案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(); 会好一点。