2019独角兽企业重金招聘Python工程师标准>>> 
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令
属性性指令的创建步骤如下：
import语句需要从 Angular 的core库导入的一些符号。
-
Directive提供@Directive装饰器功能。 -
ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。 -
Input将数据从绑定表达式传达到指令中，数据绑定。 -
HostListener绑定事件到指令中。
为@Directive装饰器指定一个 CSS 属性选择器[property]，以便从模板中识别出关联到这个指令的 HTML。
import { Directive, ElementRef, Input，HostListener } from '@angular/core';
@Directive({ selector: '[myHighlight]' })export class HighlightDirective {constructor(el: ElementRef) {}@HostListener('mouseenter') onMouseEnter() {this.el.nativeElement.style.backgroundColor = 'yellow';}
}Angular 会为每个匹配的元素创建一个指令控制器类的实例，并把 Angular 的ElementRef和Renderer注入进构造函数。 ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。
使用属性型指令
在根模块中import，declarations指令类，然后在需要的模版元素中添加指令名
<p myHighlight>Highlight me!</p>
为指令绑定响应事件
从@angular/core中引入@HostListener到指令中。HTML DOM 事件 去掉on前缀
@HostListener('事件') 函数名() {//表达式
}和addEventListener()差不多，此时在绑定了该属性的元素上触发相应的事件后，就会执行@HostListener中的函数。
用@Input向指令传递值
可以用一般的各种组件之间的数据传递方法。下面是简单的父组件向子组件传递
- 父组件中设置数据，模版元素绑定用于传递数据的变量名
- 在指令类中 @Input（‘别名’） 变量名: 值类型
