需求：
實現(xiàn)一個自定義的attribute directive，當(dāng)施加到某個html element時，鼠標(biāo)hover上去，會修改其背景顏色。

Highlight me!

下面是具體做法。

(1) 使用命令行創(chuàng)建directive：

ng generate directive highlight

自動生成的文件：

import { Directive } from '@angular/core';@Directive({selector: '[appHighlight]' }) export class HighlightDirective {constructor() { }}

中括號語法標(biāo)注了這是一個attribute指令。Angular在處理模板里的html元素時，如果發(fā)現(xiàn)某個元素具有appHighlight屬性，就會將該指令的行為施加給該元素。

這里的selector之所以不取名為highlight，是為了避免和html標(biāo)準(zhǔn)的屬性沖突。同樣，不使用ng作為前綴，為了避免和Angular預(yù)置的attribute指令沖突。使用app代表這是應(yīng)用開發(fā)人員自定義的attribute指令。

指令的具體實現(xiàn)放在highlight.directive.ts里：

通過構(gòu)造函數(shù)參數(shù)注入方式，將被施加attribute指令的DOM元素注入，這樣指令可以通過nativeElement操作該DOM元素。

(2) 在html里消費該指令：

最后的效果：

It created an instance of the HighlightDirective class and injected a reference to the

element into the directive’s constructor which sets the

element’s background style to yellow.

在運行時，Angular找到模板里標(biāo)注了appHighlight指令的element后，創(chuàng)建一個HighlightDirective class的實例，將這個element注入到directive實例的構(gòu)造函數(shù)里。

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Angular如何自定义attribute指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。