聊聊Angular中的指令(Directive)


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍一下Angular中的指令(Directive)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

环境:

  • 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教程》】

2. 组件与指令之间的关系


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

1

2

3

4

5

6

/**

 * 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生成基本文件

1

ng generate directive MyHighlight

Anuglar CLI自动生成html、css、ut等文件。

4.3. Directive指令核心代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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. 使用该指令

1

<p my-highlight>Highlight me!</p>

my-highlight 即我们的元素扩展属性(指令、directive)。

5. 总结


  • 指令(Directive)用于扩展DOM 元素或组件的功能。

  • Angular中的 *ngFor*ngIf*ngSwitch 都是Angular内置的指令。

更多编程相关知识,请访问:编程视频!!

以上就是聊聊Angular中的指令(Directive)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

浅谈Angular中的变化检测(change detection)

浅谈Angular10配置@路径别名的方法

AngularAngularjs的简单比较

浅谈Angular中的$injector对象

深入了解Angular中的hostbinding和hostlistener装饰器

如何利用管道提高Angular应用程序的性能?

Angular开发者必须学习的19件事

详解Angular中的ngmodule(模块)

详解Angular中的组件交互

浅谈Angular指令中的4种设计模式

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...