1.简介
ng2中有三种类型的指令:
- Component 组件-拥有模版的指令
- Structural directives 结构型指令-通过添加和移除DOM元素改变DOM布局
- Attribute directives 属性型指令-改变元素的显示和行为
概括:
属性型指令通过属性绑定在元素上,等于是在DOM加载元素的时候添加了一个拦截器,这个拦截器里可以获取元素,然后改变元素的样式或挂接事件。
进入属性型指令中,ng2会将ElementRef 和 Render注入到属性型指令的构造函数中,进而获取DOM元素以及改变DOM元素。
2.创建属性型指令
属性型指令是一个用@Directive装饰器装饰的类
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myAttrDire]' })
export class MyAttrDireDirective{
constructor(el: ElementRef, renderer: Renderer){
rednerer.setElementStyle(el, 'backgroundColor', '#333');
}
}
- 使用Directive装饰器装饰
- ElementRef获取dom元素
- Renderer类来操作dom元素
- Input可以向属性型指令内传入数据
- selector标识符来声明指令
@Directive装饰器需要一个属性选择器,类似于css选择器要用.或#声明,而这里我们声明的格式是方括号内加属性名’[name]’
3.使用属性型指令
<p myAttrDire> 绑定属性指令</p>
4.响应事件
通过属性型指令,我们不仅能改变宿主元素的样式,还可以绑定元素的事件。
如何使用呢?
import { Directive, ElementRef, Renderer, Input, HostLintener } from '@angular.core';
@Directive({ selector: '[myAttrDire]' })
export class MyAttrDireDirective {
constructor(private el: ElementRef, private renderer: Renderer) { }
@HostListener('mouseenter', [$event]) onMouseEnter(event: MouseEvent){
//event
}
@HostListener('mouseleave', [$event]) onMouseLeave(event: MouseEvent){
//event
}
}
通过属性型指令给元素绑定事件需要引入HostListener,通过他引用属性型指令的宿主元素。
这里需要注意下HostLintener处是如何处理的。
关于HostListener
这里@HostListener('mouseenter')括号内传入的是事件类型名,而后面的onMouseEnter其实就是一个方法,进入事件后执行的这个方法。所以这里onMouseEnter改成任意方法名都可以。
另外如果一个元素绑定了一个事件,同时又绑定了一个指令,指令内也绑定了这个事件,那么在运行中会先触发指令的事件,然后在触发元素绑定的事件。
5.向指令传递值
我们可以通过数据绑定的方法向属性型指令传入值。
下面来看一下如何做。
首先是模版上的变化
<p [myAttrDire]="color"> 绑定属性指令</p>
与我们之前使用时有了两个变化
- 指令myAttrDire用方括号包起来
- 指令后有赋值操作
然后是指令内的变化
指令内使用@Input接收数据。
@Input('myAttrDire') attrDireColor: string
这里数据就被绑定到了attrDireColor属性上了。
6.绑定第二个属性
假如一个属性不够用, 我们还需要更多的属性,如何处理?
我们首先肯定会想到,既然属性型指令可以传入数据,那么我再定义一个指令不就行了?no,这太麻烦了,angular给我们提供了方便的操作。
<p [myAttrDire]="color" [defaultColor]="'violet'"> 绑定属性指令</p>
export class ...{
...
@Input() defaultColor: string;
}
既然我们已经使用myAttrDire指令并绑定到了p元素上,就相当于这个指令与元素已经建立了关系,所以传递其他参数,我们也不需要再去声明这样一种关系了。只需要通过这一个指令即可。
7.总结
- 属性型指令为我们操作dom的样式和行为提供了便利。
- 属性型指令可以看作是元素渲染的一个拦截器。
- 我们可以在一个向指令内传入数据,并且不止一个。