Angular如何自定义attribute指令
需求: 实现一个自定义的attribute directive,当施加到某个html element时,鼠标hover上去,会修改其背景颜色。
Highlight me!
下面是具体做法。
(1) 使用命令行创建directive:
ng generate directive highlight
自动生成的文件:
import { Directive } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor() { }
}
中括号语法标注了这是一个attribute指令。Angular在处理模板里的html元素时,如果发现某个元素具有appHighlight属性,就会将该指令的行为施加给该元素。
这里的selector之所以不取名为highlight,是为了避免和html标准的属性冲突。同样,不使用ng作为前缀,为了避免和Angular预置的attribute指令冲突。使用app代表这是应用开发人员自定义的attribute指令。
指令的具体实现放在highlight.directive.ts里:
通过构造函数参数注入方式,将被施加attribute指令的DOM元素注入,这样指令可以通过nativeElement操作该DOM元素。
(2) 在html里消费该指令:
最后的效果:
It created an instance of the HighlightDirective class and injected a reference to the element into the directive’s constructor which sets the element’s background style to yellow.
在运行时,Angular找到模板里标注了appHighlight指令的element后,创建一个HighlightDirective class的实例,将这个element注入到directive实例的构造函数里。
- rpc框架之avro 学习 1 - hello world
- 探讨Android中的内置浏览器和Chrome
- java并发编程学习: 阻塞队列 使用 及 实现原理
- CSS魔法堂:说说Float那个被埋没的志向
- Netbeans配置Xdebug
- rpc框架: thrift/avro/protobuf 之maven插件生成java类
- WebComponent魔法堂:深究Custom Element 之 从过去看现在
- 数据可视化-EChart2.0使用总结1
- JavaScript事件概览
- gradle项目与maven项目相互转化
- rpc框架之gRPC 学习 - hello world
- Angular Service入门
- spring:如何用代码动态向容器中添加或移除Bean ?
- WebComponent魔法堂:深究Custom Element 之 标准构建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- DDIA 笔记
- 工作流和状态机
- CentOS 6.x 搭建:Headless Chrome + ChromeDriver + Selenium的爬虫环境系统
- 聊聊dubbo-go的registryAwareCluster
- 同样是空值,null和undefined有什么异同?
- 强大到没朋友的mysql-shell及插件
- android JavaPoet记录
- JavaScript里的分号,你加还是不加?
- 技术干货 | Docker 容器逃逸案例汇集
- 一张千万级别数据的表想做分页,如何优化?
- 一文学会爬虫技巧
- 为什么机器学习应用交易那么难(中)
- 消息队列的消费幂等性如何保证
- js中数组Array.reduce方法介绍及使用场景
- 推荐一套基于go开发的文档管理系统