Angular中的指令Directive有什么用
本篇内容主要讲解“Angular中的指令Directive有什么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Angular中的指令Directive有什么用”吧!
成都创新互联专业为企业提供双台子网站建设、双台子做网站、双台子网站设计、双台子网站制作等企业网站建设、网页设计与制作、双台子企业网站模板建站服务,10余年双台子做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
环境:
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)。
2. 组件与指令之间的关系
如果去看Angular源码,可以看到下面定义
/** * Supplies configuration metadata for an Angular component. * * @publicApi */ export declare interface Component extends Directive {
是的,Component派生于Directive,也就是说,Component属于Directive。
2.1. 指令的种类
Component 是 Directive 的子接口,是一种特殊的指令,Component 可以带有 HTML 模板,Directive 不能有模板。
属性型指令:用来修改 DOM 元素的外观和行为,但是不会改变DOM 结构,Angular 内置指令里面典型的属性型指令有 ngClass、ngStyle,如果打算封装自己的组件库,属性型指令是必备的内容。
结构型指令:可以修改 DOM 结构,内置的常用结构型指令有
*ngFor
、*ngIf
和*ngSwitch
。由于结构型指令会修改 DOM 结构,因而同一个 HTML 标签上面不能同时使用多个结构型指令。如果要在同一个 HTML 元素上面使用多个结构性指令,可以考虑加一层空的元素来嵌套,比如在外面套一层空的(p
) 。
3. Angular 中指令的用途
Angualr中用指令来增强DOM的功能,包括 HTML 原生DOM和我们自己自定义的组件(Component)。举例来说,可以扩展一个Button,实现避免点击后,服务器端未响应前的二次点击;高亮某些收入内容等等。
4. 指令举例
4.1. 指令功能
实现一个指令,鼠标移动到上面时, 背景显示为黄色,鼠标移开,恢复正常。
4.2. Anuglar CLI生成基本文件
ng generate directive MyHighlight
Anuglar CLI自动生成html、css、ut等文件。
4.3. Directive指令核心代码
import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } @HostListener('mouseenter') onMouseEnter() { this.highlight('yellow'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
4.4. 使用该指令
Highlight me!
my-highlight
即我们的元素扩展属性(指令、directive)。
5. 总结
指令(Directive)用于扩展DOM 元素或组件的功能。
Angular中的
*ngFor
、*ngIf
和*ngSwitch
都是Angular内置的指令。
到此,相信大家对“Angular中的指令Directive有什么用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
当前名称:Angular中的指令Directive有什么用
网页链接:http://myzitong.com/article/ijieod.html