Angular入门到精通系列教程（10）- 指令（Directive）

最新推荐文章于 2024-07-24 23:38:45 发布

Jack N

最新推荐文章于 2024-07-24 23:38:45 发布

阅读量6.2k

点赞数

分类专栏： Angular Angular入门到精通文章标签： angular

本文链接：https://blog.csdn.net/weixin_43288714/article/details/112568721

版权

这篇教程介绍了Angular中的指令，包括它们与组件的关系、种类及用途。讲解了属性型和结构型指令的区别，并通过实例展示了如何创建和使用自定义指令。文中还提到了Angular CLI在生成指令文件中的作用。

摘要由CSDN通过智能技术生成

环境:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

npm : 6.14.6

IDE: Visual Studio Code

1. 摘要

指令（Directive）在Angular 1.0时代（当时叫AngularJS）是很流行的，现在用到的偏少。可以简单理解为，指令（Directive）用于扩展已有Element（DOM）。

如果去看Angular源码，可以看到下面定义

/**
 * Supplies configuration metadata for an Angular component.
 *
 * @publicApi
 */
export declare interface Component extends Directive {

是的，Component派生于Directive，也就是说，Component属于Directive。

Component 是 Directive 的子接口，是一种特殊的指令，Component 可以带有 HTML 模板，Directive 不能有模板。
属性型指令：用来修改 DOM 元素的外观和行为，但是不会改变DOM 结构，Angular 内置指令里面典型的属性型指令有 ngClass、ngStyle，如果打算封装自己的组件库，属性型指令是必备的内容。
结构型指令：可以修改 DOM 结构，内置的常用结构型指令有 *ngFor、*ngIf 和 *ngSwitch。由于结构型指令会修改 DOM 结构，因而同一个 HTML 标签上面不能同时使用多个结构型指令。如果要在同一个