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实例的构造函数里。
- 解决水平ListView在ScrollView中出现的滑动冲突
- Android逆向分析(2) APK的打包与安装背后的故事
- Activity之间传递大数据问题
- React Native入门(二)Atom+Nuclide安装、配置与调试
- React Native入门(一)环境搭建与Hello World
- android 自定义Viewpager实现无限循环
- Android内存优化(二)DVM和ART的GC日志分析
- Android Material Design之Toolbar与Palette实践
- android-async-http框架源码分析
- 使用Buck构建Android工程
- android 实现淘宝收益图的折线
- React Native入门(三)组件的Props(属性)和State(状态)
- Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)【Dalston版】
- PNG图片压缩对比分析
- 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 数组属性和方法
- 三分钟Kubernetes-环境搭建篇
- Linux分区页框分配器之水位
- 使用GPU训练模型
- Spring事务源码分析专题(一)JdbcTemplate使用及源码分析
- TensorFlow处理运动想象分类任务
- 使用kepler.gl可视化地理空间数据
- 聊聊 Python 代码覆盖率工具 - Coverage
- 目标检测模型YOLO-V1损失函数详解
- 轻松学Pytorch-使用ResNet50实现图像分类
- IDEA奇淫小技巧
- [PHP框架] ThinkPHP6 介绍、安装及配置
- 【翻译】withoutboats 的 io-uring 笔记
- [Python]随机生成大量的虚拟信息测试数据(姓名,手机号,ID,家庭住址等)
- Java核心技术之动态代理
- 开源verilog仿真工具iverilog+GTKWave初体验