获取组件html中所有可用的<button>元素的列表

Question

说我的组件很简单，例如：

<div>
  <button id="one" #one>one</button>
  <button id="two" #two>two</button>
  <button id="three" #three>three</button>
</div>

是否可以返回所有按钮的列表？

即。

constructor() {
  let buttonList = findByElement('button');
}

Answer 1

使用document.querySelectorAll()

var div=document.getElementById("div");
var a=div.querySelectorAll('button');
console.log(Object.values(a))

<div id="div">
  <button id="one" #one>one</button>
  <button id="two" #two>two</button>
  <button id="three" #three>three</button>
</div>

Answer 2

如果将Renderer和ElementRef添加到组件中，则应该可以访问相关元素：

constructor(private renderer: Renderer, private elem: ElementRef){}

我相信您可以在您的组件内致电：

const elements = this.elem.nativeElement.querySelectorAll('button');

这将为您提供所需的元素。使用此方法来确保在组件初始化后的某个时刻运行代码非常重要，而不是像原始代码那样在构造函数中运行，因为我们需要确保对此具有访问权限零件。 This question有更多详细信息。