2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

屬性型指令 — 改變?cè)亍⒔M件或其它指令的外觀和行為的指令

屬性性指令的創(chuàng)建步驟如下：

import語(yǔ)句需要從 Angular 的core庫(kù)導(dǎo)入的一些符號(hào)。

Directive提供@Directive裝飾器功能。

ElementRef注入到指令構(gòu)造函數(shù)中。這樣代碼就可以訪問(wèn) DOM 元素了。

Input將數(shù)據(jù)從綁定表達(dá)式傳達(dá)到指令中，數(shù)據(jù)綁定。

HostListener綁定事件到指令中。

為@Directive裝飾器指定一個(gè) CSS 屬性選擇器[property]，以便從模板中識(shí)別出關(guān)聯(lián)到這個(gè)指令的 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 會(huì)為每個(gè)匹配的元素創(chuàng)建一個(gè)指令控制器類(lèi)的實(shí)例，并把 Angular 的ElementRef和Renderer注入進(jìn)構(gòu)造函數(shù)。?ElementRef是一個(gè)服務(wù)，它賦予我們通過(guò)它的nativeElement屬性直接訪問(wèn) DOM 元素的能力。Renderer服務(wù)允許通過(guò)代碼設(shè)置元素的樣式。

?

使用屬性型指令

在根模塊中import，declarations指令類(lèi)，然后在需要的模版元素中添加指令名

<p myHighlight>Highlight me!</p>

?

為指令綁定響應(yīng)事件

從@angular/core中引入@HostListener到指令中。HTML DOM 事件?去掉on前綴

@HostListener('事件') 函數(shù)名() {//表達(dá)式 }

和addEventListener()差不多，此時(shí)在綁定了該屬性的元素上觸發(fā)相應(yīng)的事件后，就會(huì)執(zhí)行@HostListener中的函數(shù)。

?

用@Input向指令傳遞值

可以用一般的各種組件之間的數(shù)據(jù)傳遞方法。下面是簡(jiǎn)單的父組件向子組件傳遞

• 父組件中設(shè)置數(shù)據(jù)，模版元素綁定用于傳遞數(shù)據(jù)的變量名
• 在指令類(lèi)中 ?@Input（‘別名’） 變量名: 值類(lèi)型

?

?

轉(zhuǎn)載于:https://my.oschina.net/u/3412211/blog/895121

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

總結(jié)

以上是生活随笔為你收集整理的Angular属性型指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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