Angular 指令是 Angular 应用程序中的重要组成部分，可以让开发者更加方便地操作 DOM 元素，从而实现更好的用户交互。本文将详细介绍 Angular 中的 Attribute Directive 和 Structural Directive。
Attribute Directive
Attribute Directive 可以修改或扩展元素的行为，而不改变元素的样式。其最常见的应用场景是修改元素的属性或添加新的属性，例如通过自定义指令来限制文本框的输入。
Attribute Directive 的使用非常简单，只需要用 @Directive 装饰器将指令标记为一个指令类。同时，需要用 @HostListener 装饰器来监控指令所在的元素的事件，并在事件触发时执行指令的逻辑。
以下是一个简单的 Attribute Directive 的示例，该指令对文本框的输入进行提前处理，只允许输入英文字母：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- ---------------
--
------ ----- -------------------- -
------------------------ -----------
---------------- -------------- -
----- ----- - ----------
----- ----- - --- ----------------------
----- ------- - ------------------
-- ---------- -
-----------------------
-
-
-在这个示例中，我们使用了 @HostListener 装饰器来监控 keydown 事件。当用户按下键盘上的某个键时，指令会获取输入的字符并使用正则表达式匹配，如果输入的字符不是英文字母，则阻止事件的默认行为。
Structural Directive
Structural Directive 可以改变操作元素的结构，而不改变元素本身的属性或行为。Structural Directive 通常用于添加或删除元素，或更改元素的布局结构。
与 Attribute Directive 不同的是， Structural Directive 有一个额外的特殊前缀，如 *ngIf， *ngFor 等。这个特殊前缀被称为 star (*) 符号，它表示指令改变了元素的内容结构。
以下是一个简单的案例，该指令使用 *ngFor 来循环创建列表项：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>在这个示例中， *ngFor 指令会循环遍历 items 数组，并使用每个项的值来创建一个新的列表项。由于使用了 * 符号，所以 Angular 会自动将这个指令视为 Structural Directive，将它能够改变 HTML 元素的结构。
总结
Attribute Directive 和 Structural Directive 都是 Angular 中非常重要的指令类型，它们可以帮助开发者更加灵活地操作 DOM，改进用户交互。Attribute Directive 可以修改或扩展元素的行为，而 Structural Directive 则可以改变操作元素的结构。学会使用它们，对于 Angular 的开发者来说是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469a2fa968c7c53b097e39e