angular 点击外围隐藏区域内容
如何在 angular 应用中实现点击一个特定区域之外的地方，就能隐藏该区域内的内容？
解决方案
可以使用 ng-click-outside 指令来实现此功能。该指令提供了 clickoutside 事件，它会在鼠标单击区域外时触发。
使用方法
npm install ng-click-outside
import { clickoutsidemodule } from 'ng-click-outside';
@ngmodule({
imports: [
clickoutsidemodule
]
})
export class appmodule {}<div class="box" (clickoutside)="hide()"> <div>这是区域内</div> </div>
import { Directive, ElementRef, Output, EventEmitter } from '@angular/core';
import { ClickOutsideModule } from 'ng-click-outside';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
@Output() clickOutside = new EventEmitter<any>();
constructor(private elementRef: ElementRef) { }
@HostListener('document:click', ['$event.target'])
onClick(target) {
if (this.elementRef.nativeElement.contains(target)) {
return;
}
this.clickOutside.emit();
}
}以上就是Angular点击区域外如何隐藏区域内内容？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
899
收藏
