如何解决Angular中表格行的关闭操作菜单项
我有以下代码用于打开和关闭表中每一行的幻灯片菜单。 <td>
如下所示:
<td class="rm-release_table-cell" *ngIf="settings.actions">
<div>
<a id="release-action" href="javascript:void(0)" (click)="openAction($event)">
<i class="material-icons">more_vert</i>
</a>
<div class="rm-release_action-layout hidden" #actionSlide id="release-{{release[settings.columns[0].field]}}">
<div class="rm-release_action-container animate__animated" #actionContainer>
<div class="d-flex align-items-center justify-content-between rm-release_action-header">
<a class="rm-release_action-close" href="javascript:void(0)" (click)="closeAction($event)">
<i class="material-icons">close</i>
</a>
</div>
<div class="rm-release_action-item-layout">
<div class="rm-release_action-item-layout">
<ng-container *ngIf="release.permitted_actions;else actionMenu">
<ng-container *ngFor="let action of settings.actions">
<div *ngIf="release.permitted_actions.includes(action.action)" class="d-flex align-items-center rm-release_action-item" (click)="onAction(action.action,release)">
<i class="material-icons">{{action.icon}}</i>
<p>{{action.title}}</p>
</div>
</ng-container>
</ng-container>
<ng-template #actionMenu>
<ng-container *ngFor="let action of settings.actions">
<div class="d-flex align-items-center rm-release_action-item" (click)="onAction(action.action,release)">
<i class="material-icons">{{action.icon}}</i>
<p>{{action.title}}</p>
</div>
</ng-container>
</ng-template>
</div>
</div>
</div>
</div>
</div>
</td>
/**
*
* @param event
*/
public openAction(event) {
const parent = this.renderer.parentNode(event.target);
const containerRef = this.renderer.nextSibling(parent);
//second parent
let elements = this.elem.nativeElement.querySelectorAll('.rm-release_action-layout');
_.forEach(elements,function (element) {
if (element.id != containerRef.id) {
element.classList.add('hidden');
} else {
element.style.height = 'auto';
element.style.width = '12rem';
element.style.padding = '0.5rem'
}
// this.elem.nativeElement.classList.add('hidden');
// this.renderer.addClass(element,'hidden');
});
//third parent
let parentElements = this.elem.nativeElement.querySelectorAll('.rm-release_action-container');
_.forEach(parentElements,function (parentElement) {
const parentNode = parentElement.parentNode;
if (parentNode.id == containerRef.id) {
parentNode.style.height = 'auto';
parentNode.style.width = '12rem';
parentNode.style.padding = '0.5rem';
}
});
//const containerRef = this.renderer.nextSibling(parent);
const containerChild = containerRef.children[0];
this.renderer.removeClass(containerRef,"hidden");
setTimeout(() => {
this.renderer.setStyle(containerRef,"height","auto");
this.renderer.setStyle(containerRef,"width","12rem");
this.renderer.setStyle(
containerRef,"padding","0.5rem"
);
},100);
setTimeout(() => {
this.renderer.removeClass(containerChild,"hidden");
},600);
this.renderer.addClass(containerChild,'animate__fadeIn');
}
/**
*
* @param event
*/
public closeAction(event) {
var parent = this.renderer.parentNode(event.target);
var firstParent = this.renderer.parentNode(parent);
var secondParent = this.renderer.parentNode(firstParent);
var thirdParent = this.renderer.parentNode(secondParent);
setTimeout(() => {
this.renderer.addClass(secondParent,'hidden');
this.renderer.setStyle(thirdParent,'height','0rem');
this.renderer.setStyle(thirdParent,'width','padding','0rem');
},50);
setTimeout(() => {
this.renderer.addClass(thirdParent,'hidden');
},500);
}
现在,这显示了操作菜单,当我单击关闭图标时,它正在关闭。当我单击打开的元素之外的任何位置时,我需要关闭此操作菜单。如何做到这一点?预先感谢
解决方法
将类添加到弹出窗口的DOM节点和弹出窗口之外。然后只需检查点击事件是在弹出式窗口内部还是外部的DOM部分触发。
file.ts
import { Component,ElementRef,HostListener } from '@angular/core';
clicked: string = '';
constructor(private elem: ElementRef) { }
@HostListener('document:click',['$event'])
DocumentClick(event: Event) {
if (this.elem.nativeElement.contains(event.target))
this.clicked = "inside";
else
this.clicked = "outside";
}
file.html
<p>
Click anywhere in the document and we will tell whether it was inside or outside of the component.
</p>
Clicked {{clicked}}
示例
https://stackblitz.com/edit/angular-hostlistener-clicked-inside-outside
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。