要解决Angular下拉菜单无法在点击外部时关闭的问题,可以使用以下代码示例中所示的几个步骤:
import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private elementRef: ElementRef) { }
@Output()
public clickOutside = new EventEmitter();
@HostListener('document:click', ['$event.target'])
public onClick(targetElement: any) {
const clickedInside = this.elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(null);
}
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
isDropdownOpen: boolean = false;
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
}
closeDropdown() {
this.isDropdownOpen = false;
}
}
通过使用clickOutside
指令,我们可以检测用户是否点击了下拉菜单以外的任何地方,并在点击外部时关闭下拉菜单。