Angular - 自动将指令添加到具有给定类的所有元素

Posted 2023-02-22

【中文标题】Angular - 自动将指令添加到具有给定类的所有元素

【英文标题】：Angular - automatically add directive to all elements with a given class

【发布时间】：2019-08-06 17:34:25

【问题描述】：

是否可以以编程方式向具有给定类名的组件中的所有元素添加指令，可能使用

document.getElementsByClassName("btn")

我想将matRipple 指令添加到所有使用btn 类的元素，而不需要我们的团队手动将指令添加到每个元素。

或者我是否缺少另一种方法来将 Angular Material 指令应用于给定类或标签名称的元素（例如 button）

请注意，这适用于我们不希望将它们全部切换到 mat-buttons 的旧版应用程序。该指令运行良好，但我正在寻找一种方法让我们的开发人员更轻松。

【问题讨论】：

为什么不只搜索和替换一次？

我正在寻找一个可以添加的 JS，这样我的开发人员就不需要这样做了。只是好奇，因为这是显而易见的解决方案，但需要他们做点什么。

【参考方案1】：

或者我是否缺少另一种方法来将 Angular Material 指令应用于给定类或标签名称的元素（例如按钮）

是的，你可以声明一个基于标签、属性、类等的选择器。对于一个类，您可以将其定义为：'.class'。

您可以在docs 上找到所有选项

【讨论】：

这很高兴知道，但需要我对指令本身进行代码更改。虽然我可以为自己的指令执行此操作，但我不想编辑 Angular Material 的源代码。除非我误会了……

你是对的@Steve。错过了您正在使用第三方指令。我试图创建一个自定义指令来包装 matRipple 指令并以编程方式插入它，但到目前为止似乎不可能。 This answer 指向一个 github 请求并提供了一个替代方案（不确定这是否适合这个用例）。另外，我应该删除这个答案吗？

不，您的回答可能对其他人有所帮助。感谢您的链接！