博客
关于我
Angular入门到精通系列教程(10)- 指令(Directive)
阅读量:450 次
发布时间:2019-03-06

本文共 1769 字,大约阅读时间需要 5 分钟。

环境:

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

Highlight me!

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

5. 总结

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

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

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

转载地址:http://totfz.baihongyu.com/

你可能感兴趣的文章
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>
Mysql8.0注意url变更写法
查看>>
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>