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

?

?

轉載于:https://my.oschina.net/u/3412211/blog/895121

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular属性型指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。