1. 新建一个指令
ng g directive light
打开light.directive.ts
新建的指令如下:
import { Directive } from '@angular/core';
@Directive({ // @Directive 是指令的装饰器
selector: '[myLight]' // myLight是在模板中使用的指令名
})
export class LightDirective {
constructor() { }
}
导入ElementRef
Input
:ElementRef
注入到指令构造函数中。这样代码就可以访问 DOM 元素了。Input
将数据从绑定表达式传达到指令中。
import {Directive, ElementRef, Input} from '@angular/core';
@Directive({
selector: '[myLight]'
})
export class LightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'green';
}
}
我们就新建好了一个简单的属性指令。
2. 使用属性指令
使用属性指令的方式很简单,只需要将指令放到模板的html标签里就可以了:
<h1>My First Attribute Directive</h1>
<p myLight> 页面不见鸟~</p>
当然,还需要将这个指令声明在@NgModule
中:
// app.module.ts
...
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent,
LightDirective // declarations 里面可以声明组件、指令、管道。
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
这样便可以在页面中看到效果了。
3. 响应用户触发事件
我们可以在代码中添加相应鼠标事件的代码:
// light.component.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myLight]'
})
export class LightDirective {
constructor(private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.Light('green');
}
@HostListener('mouseleave') onMouseLeave() {
this.Light(null);
}
private Light(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
所以上面是看得懂的吧。
@HostListener
装饰器引用属性型指令的宿主元素,在这个例子中就是<p>
。
4. 使用属性绑定向指令中传值
上面的例子我们已经实现的一个简单的指令,但是这样的指令还不够灵活,我们只能指定固定的颜色,而且颜色不能改变,按照预期我们应该是需要能够自己指定颜色才好。这时候就用到了我们刚才导入的Input
装饰器。
在组件中新建一个属性用来绑定颜色:假设在AppComponent
组件中:
// app.component.ts
export class AppComponent {
public color = 'green';
}
属性绑定到模板中:
<p [myLight]="color">页面不见鸟!</p>
还需要将这个颜色值传入到指令中,指令才能起作用:
// light.directive.ts
@Input() myLight: string;
你可能需要设置一个默认颜色,如果忘记写颜色值,这时候以默认值显示,好吧,直接写完成的指令:
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class LightDirective {
constructor(private el: ElementRef) { }
@Input('myLight') highlightColor: string; // 更改传入属性名为一个更语义化的变量名,可以不用。
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'red'); // 指定一个默认颜色
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
5. 绑定第二个属性
一般到这里你再也看不下去了,因为指令已经写好了,心情比较浮躁。但是我还是写了。
实现的方式是相同的,我们这里只是手动指定了一个默认默认颜色,那么这个默认颜色要由用户来指定呢?
好,按照上面的方式再写一个属性defaultColor
,然后用到模板中:
<p [myLight]="color" defaultColor="violet"> <!-- 颜色直接写死在这里了,你自己来改 -->
页面不见鸟~
</p>
指令中再修改一下:
// light.directive.ts
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this.defaultColor || 'red');
}
6. 获取宿主元素的属性值
在指令中,通过Attribute
装饰器来获取宿主元素的属性值。
指令写法:
import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core';
// ...
// constructor 中我们使用 @Attribute装饰器来获取宿主元素(p)的属性(hero)
constructor(el: ElementRef, @Attribute('hero') public hero: string) {
el.nativeElement.style.backgroundColor = 'green';
console.log(this.hero);
}
模板中我们也做适当的修改:
<p myLight hero="Big Keriy!"> <!-- 加上hero属性 -->
页面不见鸟~
</p>
hero
属性的写法有两种方式,当等号右边为变量时使用[hero]
这种形式。为固定值的时候,看上面。