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（‘別名’） 變量名: 值類型
?
?
)
)
)
)