Angular入门到精通系列教程(10)
![Angular入门到精通系列教程(10)](https://www.0419af.com/wp-content/uploads/2023/02/f42b53981590c67d012e7072b8a9205f.png)
npm : 6.14.6
IDE: Visual Studio Code
1.
摘要
指令(
Directive
)在
Angular 1.0
时代(当时叫
AngularJS
)是很流⾏的,现在⽤到的偏少。可以简单理解为,指令(
Directive
)⽤于扩展已
有
Element
(
DOM
)。
2.
组件与指令之间的关系
如果去看
Angular
源码,可以看到下⾯定义
/**
* Supplies configuration metadata for an Angular component.
*
* @publicApi
*/
export declare interface Component extends Directive {
是的,
Component
派⽣于
Directive
,也就是说,
Component
属于
Directive
。
2.1.
指令的种类
1.
Component
是
Directive
的⼦接⼝,是⼀种特殊的指令,
Component
可以带有
HTML
模板,
Directive
不能有模板。
2.
属性型指令:⽤来修改
DOM
元素的外观和⾏为,但是不会改变
DOM
结构,
Angular
内置指令⾥⾯典型的属性型指令有
ngClass
、
ngStyle
,如果打算封装⾃⼰的组件库,属性型指令是必备的内容。
3.
结构型指令:可以修改
DOM
结构,内置的常⽤结构型指令有
*ngFor
、
*ngIf
和
*ngSwitch
。由于结构型指令会修改
DOM
结构,因⽽同⼀
个
HTML
标签上⾯不能同时使⽤多个结构型指令。如果要在同⼀个
HTML
元素上⾯使⽤多个结构性指令,可以考虑加⼀层空的元素来
嵌套,⽐如在外⾯套⼀层空的(
div
)
。
3. Angular
中指令的⽤途
Angualr
中⽤指令来增强
DOM
的功能,包括
HTML
原⽣
DOM
和我们⾃⼰⾃定义的组件(
Component
)。举例来说,可以扩展⼀个
Button
,
实现避免点击后,服务器端未响应前的⼆次点击;⾼亮某些收⼊内容等等。
4.
指令举例
4.1.
指令功能
实现⼀个指令,⿏标移动到上⾯时,
背景显⽰为黄⾊,⿏标移开,恢复正常。
4.2. Anuglar CLI
⽣成基本⽂件
ng generate directive MyHighlight
Anuglar CLI
⾃动⽣成
html
、
css
、
ut
等⽂件。