属性指令(Attribute directive)：用于改变组件的外观或行为
一个属性指令需要一个控制器类，该控制器类使用@Directive装饰器来装饰。@Directive装饰器指定了用以标记指令所关联属性的选择器，控制器类则实现了指令所对应的特定行为。
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appBeautifulbackground]'
})
export class BeautifulbackgroundDirective {
constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor = "yellow";
}
}
在上述代码示例中，首先从Angular核心模块@angular/core中引入了 Directive和ElementRef。Directive被用作@Derective装饰器，而ElementRef则用来访问DOM元素。随后，在@Directive装饰器中以键值对的形式定义了指令的元数据。在配置对象中，使用selector属性来标识该属性指令所关联的元素名称。[appBeautifulbackground]是指令所对应的CSS选择器，注意中括号“[]”不能丢，中括号在CSS选择器中表示元素属性匹配。所以当指令运行时， Angular会在模板中匹配所有包含属性名称appBeautifulbackground的DOM元素。
在@Directive元数据下面是该自定义指令的控制器类，该类实现了指令所包含的逻辑，export关键字被用来将指令导出以供其它组件访问。
Angular会为每一个匹配的DOM元素创建一个指令实例，同时将ElementRef作为参数注入到控制器构造函数。使用ElementRef服务，可以在代码中通过其nativeElement属性直接访问DOM元素，这样就可以通过 DOM API设置元素的背景颜色。
<div appBeautifulbackground>我的背景色</div>
在上述代码中，首先在 AppModule中引入自定义指令代码文件，并在 @NgModel装饰器中，为declarations属性赋值声明引用。然后在Appcomponent组件的模板中，在将要使用指令的目标元素上，添加 mybeautifulbackground属性，这一属性名需要与自定义指令的@Directive装饰器中选择器匹配。
运行这一示例时, Angular会在组件的<div>元素上解析到appBeautifulbackground属性，然后创建 BeautifulbackgroundDirective指令类的实例，将元素的引用传入构造函数,用以设置元素的样式。
input
在上述自定义指令中，为元素设置的背景色是固定的。为了增加灵活性，可以在指令外部使用绑定的方式设置背景色。
<div [appBeautifulbackground] = "color">我的背景色</div>
为了给指令绑定外部变量，需要为指令声明一个可绑定的输入属性backgroundColor。需要在属性上使用@Input装饰器，@Input标识使得属性具有绑定能力，可将外部变量的值绑定到指令的属性中。
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[appBeautifulbackground]'
})
export class BeautifulbackgroundDirective {
@Input("appBeautifulbackground")
backgroundColor:string = "yellow";
constructor(el:ElementRef) {
console.log(this.backgroundColor);
el.nativeElement.style.backgroundColor = this.backgroundColor;
}
}
注意上述代码的@Input(“appBeautifulbackground”)装饰器中，为输入属性backgroundColor指定了appBeautifulbackground别名。注意这里指定的别名，与指令在@Directive装饰器中定义的选择器名称一致，这并不是必须的。这里定义成一致的，是为了在元素中使用指令时，不必再使用另外的名称来绑定输入变量。当然，也可以为backgroundColor属性定义其他的别名，如将属性别名定义为@Input( ‘myBackgroundColor’)，这时需要在组件中使用如下的方式来绑定这一属性：
<div appBeautifulbackground [myBackgroundColor] = "color">我的背景色</div>
上述示例中，为绑定属性名和别名分别命名了不同的名称。如果不需要为属性提供不同的别名，则可以在@Input装饰器中省略对别名的定义，使用如下所示的便捷定义
@Input()
backgroundColor:string = "yellow";
那么上述省略对别名定义后，在模板中用法如下：
<div appBeautifulbackground [backgroundColor] = "color">我的背景色</div>
现在已经为指令定义了用来绑定输入变量的属性，在组件模版中，将color变量绑定给这一属性，color变量可以来自多个地方，可以是组件中定义的变量，也可以来自组件模版的输入元素。
<div>
<input type="radio" name = "colors" (click) = "color = 'green'">绿色
<input type="radio" name = "colors" (click) = "color = 'yellow'">黄色
<input type="radio" name = "colors" (click) = "color = 'red'">红色
</div>
<div appBeautifulbackground [backgroundColor] = "color">我的背景色</div>
HostBinding 装饰器
该指令用于演示如何利用 HostBinding 装饰器，设置元素的 innerText 属性。
指令的实现
import { Directive, HostBinding} from '@angular/core';
@Directive({
selector: '[appChange]'
})
export class ChangeDirective {
@HostBinding() innerHTML:string = "test";
@HostBinding("style.color") get color(){
return "red"
}
}
指令的应用
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>Hello, Angular</h2>
<h2 appChange>Hello, Angular</h2>
`,
})
export class AppComponent { }
HostListener装饰器
@Directive({
selector: '[appChange]'
})
export class ChangeDirective {
@HostBinding() innerHTML:string = "test";
@HostBinding("style.color") get color(){
return "red"
}
@HostListener("click",['$event.target']) onclick(btn:HTMLElement){
this.innerHTML = Math.random() * 1000 + "";
console.log(btn);
}
}
