环境:

  • 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. 指令的种类

  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等文件。

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

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

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

5. 总结

  • 指令(Directive)用于扩展DOM 元素或组件的功能。
  • Angular中的 *ngFor*ngIf*ngSwitch 都是Angular内置的指令。

---------------- END ----------------

======================

Angular入门到精通系列教程(10)- 指令(Directive)的更多相关文章

  1. 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)

    办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...

  2. 第一章:模型层model layer -- Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 题外话: Django的教程写到这里,就进入 ...

  3. Laravel 从入门到精通系列教程

    转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...

  4. SpringBoot系列之从入门到精通系列教程

    对应SpringBoot系列博客专栏,例子代码,本博客不定时更新 Spring框架:作为JavaEE框架领域的一款重要的开源框架,在企业应用开发中有着很重要的作用,同时Spring框架及其子框架很多, ...

  5. Django简介--Django从入门到精通系列教程

    该系列教程系个人原创,并同步发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  6. Django环境安装--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  7. Part 1:请求与响应--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  8. Part 2:模型与后台管理admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  9. Part 3:视图和模板--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  10. Part 7:自定义admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

随机推荐

  1. 深入理解java虚拟机(7)---线程安全 &amp; 锁优化

    关于线程安全的话题,足可以使用一本书来讲解这些东西.<Java Concurrency in Practice> 就是讲解这些的,在这里 主要还是分析JVM中关于线程安全这块的内容. 1. ...

  2. [1015][JSOI2008]星球大战starwar(并查集)

    1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2124  Solved: 909[Submit] ...

  3. Workaround for Markdown blogging platform that to use LaTeX

    Here is a solution to solve the lack of LaTeX support: by using Codecogs API. For instance, if you n ...

  4. libnuma.so.1()(64bit) is needed by mysql-community-server-5.7.9-1.el6.x86_64

    版本:5.7.9 新装的CentOS 6.3 安装MySQL 5.7.9 出现的问题 1.首先卸载系统自带的mysql 5.1的包    yum   -y  remove   mysql-libs-5 ...

  5. SQLite cans and can&#39;ts

    SQLite 能做的 和 不能做的 1.SQLite_open/SQLite_open_v2

  6. ZOJ-2587-Unique Attack(最小割的唯一性)

    题意: 求无向图最小割是否唯一 分析: 1.我们先对原图求一次最大流 2.对残留网络,我们从S开始,找到所有所有S能到达的点:再从T开始,找出所有能到达T的点. 3.判断原网络中是否还有没有访问到的点 ...

  7. sql server 调优----索引缺失

    SELECT mig.index_group_handle, mid.index_handle, CONVERT (decimal (28,1), migs.avg_total_user_cost * ...

  8. iOS性能之WebP

    当今互联网,无论网页还是APP,流量占用最大的,多数都是因为图片,越是良好的用户体验,对图片的依赖度越高.但是图片是一把双刃剑,带来了用户体验,吸引了用户注意,却影响了性能,因为网络请求时间会相对比较 ...

  9. 组合 Lucas定理

    组合 Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u [Submit]   [Go Ba ...

  10. Vim替换查找

    ##一.字符的替换及撤销(Undo操作)       ###1.替换和撤销(Undo)命令       替换和Undo命令都是针对普通模式下的操作       命令 | 说明   -----|---- ...