入手方式：
- 需求 -- 先要弄清楚我們做什么？
- 被使用方式 -- 長(zhǎng)什么樣子？什么場(chǎng)景被使用？怎么被使用？
- 將每個(gè)特性寫成單元測(cè)試，然后寫代碼，將這個(gè)單元的代碼測(cè)試通過后，再進(jìn)行下一個(gè)特性代碼的單元測(cè)試。
綁定宿主元素的事件，事件綁定的時(shí)候捕捉到這個(gè)事件源$event（table指令，這是屬性型指令的重點(diǎn)）。
Angular指令可分為三種
- 組件
- 屬性型指令
- 結(jié)構(gòu)型指令
今天來(lái)學(xué)習(xí)一下屬性型指令。
屬性型指令把行為添加到<u>現(xiàn)有元素上。</u>
屬性型指令用于改變一個(gè) DOM 元素的外觀或行為。
創(chuàng)建一個(gè)屬性型指令 -- 初級(jí)應(yīng)用
自己創(chuàng)建屬性型指令的必要條件：
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
-
import語(yǔ)句指定了從 Angular 的core庫(kù)導(dǎo)入的一些符號(hào)。
- Directive提供@Directive裝飾器功能。
- ElementRef注入到指令構(gòu)造函數(shù)中。 這樣代碼可以訪問 DOM 元素。
- Input將數(shù)據(jù)從綁定表達(dá)式傳達(dá)到指令中。
- Renderer讓代碼可以改變 DOM 元素的樣式。
@Directive裝飾器需要一個(gè) CSS 選擇器(屬性名稱加方括號(hào)-[attr])，以便從模板中識(shí)別出關(guān)聯(lián)到這個(gè)指令的 HTML。
指令的選擇器是[myHighlight]，Angular 將會(huì)在模板中找到所有帶myHighlight屬性的元素。**ElementRef是一個(gè)服務(wù)，它賦予我們通過它的nativeElement屬性直接訪問 DOM 元素的能力。 **
Renderer服務(wù)允許通過代碼設(shè)置元素的樣式。
別忘了把這個(gè)指令添加到 NgModule 元數(shù)據(jù)的declarations數(shù)組中。
響應(yīng)用戶引發(fā)的事件 -- 高級(jí)應(yīng)用
需求
鼠標(biāo)懸浮一個(gè)元素時(shí)，顯示字的背景顏色。
- 檢測(cè)用戶的鼠標(biāo)何時(shí)進(jìn)入和離開這個(gè)元素。
- 通過設(shè)置和清除高亮色來(lái)響應(yīng)這些操作。
實(shí)現(xiàn)
把@HostListener裝飾應(yīng)用到事件觸發(fā)時(shí)需調(diào)用的方法。
/**
* 參數(shù)1：DOM事件的名字
* 參數(shù)2：注入的事件，常用的是$event
*/
@HostListener('click', ['$event']) onclick(event: MouseEvent) {}
@HostListener('mouseenter') onMouseEnter() {
/* . . . */
}
@HostListener('mouseleave') onMouseLeave() {
/* . . . */
}
@HostListener裝飾器引用屬性型指令的宿主元素，在這個(gè)例子中就是<p>。
直接操縱 DOM 元素的方式給宿主 DOM 元素附加一個(gè)事件監(jiān)聽器。
<u>注意：正確的書寫監(jiān)聽器，并且還要在指令被銷毀的時(shí)候，必須卸掉監(jiān)聽器，不然會(huì)造成內(nèi)存泄漏。</u>使用數(shù)據(jù)綁定向指令傳遞值,在定義這個(gè)屬性的時(shí)候，我們調(diào)用了@Input()裝飾器。
@Input('myHighlight') highlightColor: string; // 屬性
<p [myHighlight]="color">Highlight me!</p> // 頁(yè)面
