angular 点击外围隐藏区域内容
如何在 angular 应用中实现点击一个特定区域之外的地方，就能隐藏该区域内的内容？
解决方案
可以使用 ng-click-outside 指令来实现此功能。该指令提供了 clickoutside 事件，它会在鼠标单击区域外时触发。
网易人工智能
网易数帆多媒体智能生产力平台
206 查看详情
使用方法
安装 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(); }}
以上就是Angular点击区域外如何隐藏区域内内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1146431.html
微信扫一扫 
支付宝扫一扫 
