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]这种形式。为固定值的时候，看上面。
