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

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular如何自定义attribute指令相关推荐

浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
Angular 4.x 自定义验证指令
表单是几乎每个 Web 应用程序的一部分.虽然 Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能.接下来 ...
angular的自定义指令---详解
1.angualr指令在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
Angular深入理解之指令
Angular深入理解之指令指令有什么功能 Attribute directives 属性指令 Structural directives 结构指令自定义属性指令自定义结构指令 Angular深 ...
angular-创建自定义的指令
http://www.runoob.com/angularjs/angularjs-directives.html [ ] 创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定 ...
Angular应用的路由指令RouterLink
Angular应用的路由指令RouterLinkapp Component html源代码: <h1>{{title}}</h1> <nav><a route ...
angular 自定义组件_如何创建Angular 6自定义元素和Web组件
angular 自定义组件 by Prateek Mishra 通过Prateek Mishra 如何创建Angular 6自定义元素和Web组件 (How to create Angular 6 C ...
Angular: [ControlValueAccessor] 自定义表单控件
Angular: [ControlValueAccessor] 自定义表单控件我们在实际开发中,通常会遇到各种各样的定制化功能,会遇到有些组件会与 Angular 的表单进行交互,这时候我们一般会从 ...
XsdGen：通过自定义Attribute与反射自动生成XSD
前言系统之间的数据交互往往需要事先定义一些契约,在WCF中我们需要先编写XSD文件,然后通过自动代码生成工具自动生成C#对象.对于刚刚接触契约的人来说,掌握XMLSpy之类的软件之后确实比手写XML ...

Angular如何自定义attribute指令

Angular如何自定义attribute指令相关推荐

最新文章

热门文章