Angular 中的指令是一个强大的工具，可以让我们扩展 HTML 元素的行为并实现复杂的功能。在使用指令时，经常需要向指令传递一些参数。本文将介绍如何将布尔值传递给指令，并提供代码示例。
通过属性绑定传递布尔值
我们可以使用属性绑定来将布尔值传递给指令。属性绑定用方括号（[]）表示，后跟要传递的属性名和等号（=），再跟上表达式。例如，如果我们有一个名为 myDirective 的指令，它需要一个布尔值类型的参数 isTrue，我们可以这样写：
<div myDirective [isTrue]="true"></div>
在这个例子中，我们将 isTrue 属性绑定到了 true 这个表达式。指令可以通过 @Input() 装饰器接收这个属性：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- --------------- -- ------ ----- ----------- - -------- ------- -------- -- --- -
在指令的代码中，我们可以像使用普通的类属性一样使用 isTrue 属性。
通过属性绑定传递反转的布尔值
有时候，我们需要传递一个布尔值的相反值或者一个计算出来的布尔值。我们可以使用感叹号（!）来取反一个布尔值，也可以在表达式中计算出一个布尔值。例如：
<div myDirective [isTrue]="!false"></div> <div myDirective [isTrue]="someExpression > 10"></div>
如何设计接收布尔值的指令
如果我们需要编写一个接收布尔值的指令，最好将布尔值声明为可选参数，并提供一个默认值。这样，在没有传递参数时，指令就不会报错。例如：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- --------------- -- ------ ----- ----------- - -------- -------- ------- - ------ -- --- -
在这个例子中，我们将 isTrue 声明为可选参数，并设置了默认值为 false。
指令代码示例
以下是一个简单的指令示例，它根据布尔值的值来添加或删除一个 CSS 类：
-- -------------------- ---- -------
------ - ---------- ------ ----------- --------- - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
-------- ------------- -------
-------- --------------- ------- - -----
------------------- ------ ----------- ------- --------- ---------- --
-------------- ---- -
-- ----------------- -- ------------------- -
------------------------------------------------ ------------------
- ---- -
--------------------------------------------------- ------------------
-
-
-这个指令接收两个参数：toggleClass 和 toggleClassIf。当 toggleClassIf 的值为 true 时，指令会在元素上添加一个 CSS 类，类名为 toggleClass。当 toggleClassIf 的值为 false 时，指令会从元素上移除这个 CSS 类。
以下是使用这个指令的示例：
<div toggleClass="active" [toggleClassIf]="someExpression > 10">...</div>
在这个例子中，如果表达式 someExpression > 10 的值大于 10，那么这个元素就会添加一个名为 active 的 CSS 类。
总结
本文介绍了如何将布尔值传递给 Angular 指令，并提供了代码示例。通过属性绑定传递布尔值非常简单，同时，我们还应该注意编写健壮的指
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28833