在使用 Angular 指令时，我们通常需要检查指令上是否传递了某个属性。这篇文章将介绍如何在 Angular 指令中检查属性是否存在。
使用 @Input 装饰器
Angular 提供了 @Input 装饰器来让我们方便地检查指令上是否传递了某个属性。我们可以在指令类中使用 @Input 装饰器来定义一个输入属性：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
-------- ----------- -------
------------- - -
----------- ---- -
-- ----------------- -
----------------------- ---------
- ---- -
----------------------- ---- --- --------
-
-
-在上面的例子中，我们使用 @Input 装饰器定义了一个名为 myProperty 的输入属性。在 ngOnInit 生命周期钩子函数中，我们检查了这个属性是否存在。
使用 ElementRef 和 @HostBinding 装饰器
除了使用 @Input 装饰器之外，我们还可以使用 ElementRef 和 @HostBinding 装饰器来检查指令上是否传递了某个属性。
首先，我们需要注入 ElementRef 对象来获取指令所在的 DOM 元素：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
------------------- ----------- ----------- - -
----------- ---- -
-- ----------------------------------------------------------- -
----------------------- ---------
- ---- -
----------------------- ---- --- --------
-
-
-在上面的例子中，我们使用 ElementRef 对象获取了指令所在的 DOM 元素，并使用 hasAttribute 方法检查了是否存在名为 my-property 的属性。
另外，我们还可以使用 @HostBinding 装饰器来绑定一个 HTML 属性到指令类中的一个属性上：
-- -------------------- ---- -------
------ - ---------- ----------- - ---- ----------------
------------
--------- ---------------
--
------ ----- ----------- -
-------------------------------- ---------------- - ------
----------- ---- -
--------------------- - ----------------------------------------------------------
-
-在上面的例子中，我们使用 @HostBinding 装饰器将 my-property 属性绑定到指令类中的 myPropertyExists 属性上。在 ngOnInit 生命周期钩子函数中，我们通过 hasAttribute 方法检查了是否存在这个属性，并将结果赋值给 myPropertyExists 属性。
总结
本文介绍了在 Angular 指令中检查属性是否存在的方法，包括使用 @Input 装饰器、ElementRef 对象和 @HostBinding 装饰器。通过这些方法，我们可以轻松地检查指令上是否传递了某个属性，并根据需要执行相应的操作。
代码示例：https://stackblitz.com/edit/angular-check-attribute-existence
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27271