Angular17之Angular自定义指令详解(4)

日期：2020-05-11 栏目：程序人生 浏览：次

　　　　　　》 效果展示　　　

　

　　4.3 响应用户操作

　　　　在自定义属性指令中通过监听DOM对象事件来进行一些操作

　　　　4.2.1 引入 HostListener 注解并编写一个方法　　　　

　　　　　　技巧01：HostListener注解可以传入两个参数

　　　　　　　　参数1 -> 需要监听的事件名称

　　　　　　　　参数2 -> 事件触发时传递的方法

 @HostListener('click', ['$event'])
 onClick(ev: Event) {
  }

　　　　4.2.2 在方法中实现一些操作 

@HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }

　　　　4.2.3 在组件中标记自定义属性指令的选择器就可以啦

<div class="panel panel-primary">
 <div class="panel panel-heading">实现自定义属性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02 >实现自定义指令的按钮</button>
 <br /><br />
 <button md-raised-button>未实现自定以指令的按钮</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

　　　　4.2.4 代码汇总

import { Directive, ElementRef, OnInit, Input, HostListener } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 }
 @HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }
}

总结

以上所述是小编给大家介绍的Angular17之Angular自定义指令详解，希望对大家有所帮助，如果大家有任何疑问欢迎各我留言，小编会及时回复大家的！