溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Angular的Directive指令怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Angular的Directive指令怎么使用”文章能幫助大家解決問題。
Directive 用來修飾 DOM 給它添加額外的行為。
Angular 內置指令 angular.cn/guide/built…
例如 開發中常用的 *ngFor 就是一個指令 用來遍歷渲染 DOM 元素
這里我主要介紹一下如何自定義一個自己的指令
舉個例子 我們希望鼠標移入/移出的時候 DOM 背景色有切換
下面 我們來實現這個例子<!-- 默認 鼠標移入時背景變成黃色 -->
<p highlight>Highlight me!</p>
<!-- 指定顏色 鼠標移入時背景變成紅色 -->
<p highlight="red">Highlight me!</p>
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
// Directive裝飾器 可以接收一個對象參數 但是現在我們還不需要
@Directive()
export class HighlightDirective {
// 給這個指定定義一個 highlight 屬性
@Input() highlight = 'yellow';
// 這里的 el 就是被我們的指令直接修飾的那個dom
constructor(private el: ElementRef) {
// 你可以在這里直接操作 dom
}
// 給這個dom定義一個mouseenter的監聽器 后面的名字可以自定定義
@HostListener('mouseenter')
onMouseEnter() {
this.highlight(this.highlight);
}
// 添加鼠標移出的監聽器 綁定對應的事件邏輯
@HostListener('mouseleave')
onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
關于“Angular的Directive指令怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
