如何使用AngularJS2中的指令

這篇文章主要介紹如何使用AngularJS2中的指令，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

這次我們使用Angular2的指令來實現。

指令實現hover效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('mouseenter') onMouseEnter() {
 this.highlight('red');
 }
 @HostListener('mouseleave') onMouseLeave() {
 this.highlight(null);
 }
 private highlight(color: string) {
 this.el.nativeElement.style.backgroundColor = color;
 }
}

<button myHighlight class="btn">按鈕一</button>
<button myHighlight class="btn">按鈕二</button>
<button myHighlight class="btn">按鈕三</button>

.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}

hover的效果直接參考Angular官網的代碼。

指令實現click效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('click') onMouseClick() {
 this.clickhighlight("black");
 }
 private clickhighlight(color: string) {
 let obj = this.el.nativeElement;
 let btns = obj.parentNode.children;
 //背景色全部重置
 for(let i=0; i<btns.length; i++){
 btns[i].style.backgroundColor = "#3399ff";
 }
 //設置當前點擊對象的背景色
 obj.style.backgroundColor = color;
 }
}

<div>
<button myHighlight class="btn">按鈕一</button>
<button myHighlight class="btn">按鈕二</button>
<button myHighlight class="btn">按鈕三</button>
</div>

.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}

click效果仍然用@HostListener裝飾器引用屬性型指令的宿主元素，首先把所有button的背景顏色重置，然后再設置當前點擊對象的背景顏色，這樣就達到了點擊后背景顏色變化的效果。

指令實現click加hover效果

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
 selector: '[myHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) { }
 @HostListener('click') onMouseClick() {
 this.clickhighlight("black");
 }
 private clickhighlight(color: string) {
 let obj = this.el.nativeElement;
 let btns = obj.parentNode.children;
 //背景色全部重置
 for(let i=0; i<btns.length; i++){
 btns[i].style.backgroundColor = "#3399ff";
 }
 //設置當前點擊對象的背景色
 obj.style.backgroundColor = color;
 }
}

<div>
<button myHighlight class="btn">按鈕一</button>
<button myHighlight class="btn">按鈕二</button>
<button myHighlight class="btn">按鈕三</button>
</div>

.btn{
 height: 50px;
 width: 100px;
 background-color: #3399ff;
 color: white;
 border: 0;
 outline: 0;
 cursor: hand;
}
.btn:hover{
 background: black !important;
}

配合上文click效果，只要加上一行css代碼就可以實現click和hover的組合效果，此處務必使用hover偽類，并用!important來提升樣式的優先級，如果用@HostListener裝飾器，mouseenter、mouseleave、click三者會打架：

以上是“如何使用AngularJS2中的指令”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！