angular 点击外围隐藏区域内容
如何在 angular 应用中实现点击一个特定区域之外的地方，就能隐藏该区域内的内容？
解决方案
可以使用 ng-click-outside 指令来实现此功能。该指令提供了 clickoutside 事件，它会在鼠标单击区域外时触发。
使用方法
- 安装 ng-click-outside 指令：
npm install ng-click-outside
- 在 app 模块中导入指令：
import { clickoutsidemodule } from 'ng-click-outside';
@ngmodule({
imports: [
clickoutsidemodule
]
})
export class appmodule {}- 在组件模板中使用指令：
这是区域内
- 在组件类中定义 hide 方法来处理点击事件：
import { Directive, ElementRef, Output, EventEmitter } from '@angular/core';
import { ClickOutsideModule } from 'ng-click-outside';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
@Output() clickOutside = new EventEmitter();
constructor(private elementRef: ElementRef) { }
@HostListener('document:click', ['$event.target'])
onClick(target) {
if (this.elementRef.nativeElement.contains(target)) {
return;
}
this.clickOutside.emit();
}
} 
