如何在Angular中使用document.querySelectorAll获取节点列表

Question

这是电子商务应用程序的一部分，客户可以在其中选择订单并结账。一组类似的按钮，具有data-属性，并分别扩展到data-something。我能够在JavaScript和Html 5中很好地实现这一点。我想知道如何使用Angular实现完全相同的效果。

<button data-plan="bronze">Select Plan</button>
<button data-plan="silver">Select Plan</button>
<button data-plan="gold">Select Plan</button>
<button data-plan="diamond">Select Plan</button>

以下是我希望在Angular、中实现的JavaScript

// Select Plan Logic
const planButtons = document.querySelectorAll("button[data-plan]");

Answer 1

要与Angular中的HTML元素交互并对其进行引用，应该使用@ViewChild或@ViewChildren装饰器。第一个仅适用于一个元素，第二个适用于多个元素。

当使用这些装饰器时，您应该考虑ngAfterViewInit生命周期方法，在该方法中您可以访问对DOM元素的引用。在引擎盖下，@ViewChild或@ViewChildren正在使用document.querySelector和document.querySelectorAll。

了解并阅读更多关于他们的信息：

https://angular.io/api/core/ViewChild

https://angular.io/api/core/ViewChildren