专栏首页Jerry的SAP技术分享Angular如何自定义attribute指令

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实例的构造函数里。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何自行查找出SAP CRM产品主数据页面的assignment block基于的settype类型

    We know an assignment block in overview page is built based on settype or relati...

    Jerry Wang
  • how to know which settype an assignment block is built based on

    We know an assignment block in overview page is built based on settype or relati...

    Jerry Wang
  • SAP CRM呼叫中心和Hybris Commerce Backoffice的轮询设计

    在CRM 呼叫中心还没有用ABAP push channel 重新设计之前,因为后台没法向浏览器push event,因此前台只能每隔1秒向后台发一个http ...

    Jerry Wang
  • redis性能调优笔记(can not get Resource from jedis pool和jedis connect time out)

    对这段时间redis性能调优做一个记录。 1、单进程单线程 redis是单进程单线程实现的,如果你没有特殊的配置,redis内部默认是FIFO排队,即你对red...

    用户1225216
  • Xshell不能连接SSH的解决

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 异常处理汇总-开发工具 http:/...

    逸鹏
  • 使用 shell 在多服务器上批量操作

    日常工作中,我们常需要同时在多台服务器上执行同样的命令,如对比日志、检查服务等。这就需要我们有服务器批量操作的能力。

    枕边书
  • 使用 Shell 在多服务器上批量操作

    日常工作中,我们常需要同时在多台服务器上执行同样的命令,如对比日志、检查服务等。这就需要我们有服务器批量操作的能力。

    用户6543014
  • Flutter借用package.json管理Flutter常用命令

    Flutter的命令一般比较长,而个人“年纪大了”常记不太清楚,考虑电脑有node的环境,所以干脆利用package.json来管理一些常用命令:

    IT晴天
  • Coach 包含carla Env的强化学习框架

    https://github.com/18605973470/rl-with-carla/blob/master/gym_carla.py

    用户1908973
  • 走,带你围观京东集团第七届【HACKATHON黑客马拉松】

    2018年9月8-9日,京东集团第7届【HACKATHON黑客马拉松】大赛于京东总部举办。本届大赛由【CTO体系-京东技术学院】主办。大赛自8月6日开始启动报名...

    京东技术

扫码关注云+社区

领取腾讯云代金券