问题描述: 在Angular项目中使用clickOutside指令时发现指令不起作用,点击外部元素时不触发指令绑定的事件。
解决方法:
示例代码:
// click-outside.directive.ts
import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
@Output() clickOutside = new EventEmitter();
constructor(private elementRef: ElementRef) { }
@HostListener('document:click', ['$event.target'])
onClick(target: any) {
const clickedInside = this.elementRef.nativeElement.contains(target);
if (!clickedInside) {
this.clickOutside.emit();
}
}
}
示例代码:
Click outside me
示例代码:
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onOutsideClick() {
console.log('Clicked outside');
}
}
以上是一个简单的使用clickOutside指令的示例,确保按照以上步骤正确设置指令,并实现相应的事件处理函数,即可解决clickOutside指令不起作用的问题。