javascript - 单击外部角度分量
问题描述
我知道这方面有无数的问题,我尝试了每一个解决方案,但没有一个适合我的需要。尝试过的指令,直接在我的组件中尝试过,但一次都没有用。
所以我的情况是这样的;我有一个表格视图,在每个表格视图的末尾,您可以通过单击图标打开一个小下拉列表。弹出的下拉列表是一个小组件。所以在我的父组件中它看起来像这样;
<tbody>
<tr *ngFor="let rows of subscriptionTable.data; let i = index;">
<td *ngFor="let cell of subscriptionTable.data[i].data">
<!-- Table actions -->
<div *ngIf="cell.actions && cell.actions.length > 0">
<app-dropdown
[actions] = cell.actions
(onActionClicked) = "handleSubscriptionAction($event, i)"
>
</app-dropdown>
</div>
</td>
</tr>
</tbody>
所以我正在渲染多个看起来像这样的子应用下拉组件;
<div class="fs-action">
<div class="fs-action__dots" (click)="openActionSheet($event)">
<span class="fs-action__dot"></span>
<span class="fs-action__dot"></span>
<span class="fs-action__dot"></span>
</div>
<ul class="fs-action__list">
<li
class="fs-action__item"
*ngFor="let action of actions; let i = index;"
(click)="actionClicked( $event, i )"
[ngClass]="{'fs-action__item--danger': action.type === 'destructive' }"
>
{{ action.label }}
</li>
</ul>
</div>
我现在想要做的是,只要我在 fs-action 元素之外单击,下拉菜单就会消失。我想在app-dropdown
组件内部执行此操作,然后与该组件相关的所有内容都在同一个地方。
但是,只要我附加了指令或其他任何内容,hostlistener
就会为每一行添加 get。然后,每个外部点击都会被触发多次。检查我是否在动作元素之外单击会成为一种负担,因为它会为所有其他元素呈现假,而为活动元素呈现hostlisteners
真。
这个问题在这个 stackblitz 中得到了说明;https://stackblitz.com/edit/angular-xjdmg4
我评论了导致内部问题的部分dropdown.component.ts
;
public onClickOutside( event ) {
// It executes 3 times, for each of the items that is added
// Even when clicking inside the dropdown, it calls this function
console.log("click")
}
解决方案
只需使用 (click) 事件绑定,从组件的实例中传递一个函数,您就完成了。
解决方案: 声明指令ClickOutside如下:
@Directive({
selector: '[clickOutside]',
})
export class ClickOutsideDirective {
@Output('onClickOutside') onClickOutside = new EventEmitter<MouseEvent>();
constructor(private _eref: ElementRef) {}
@HostListener('document:click', ['$event', '$event.target'])
onDocumentClicked(event: MouseEvent, targetElement: HTMLElement) {
if (targetElement && document.body.contains(targetElement) && !this._eref.nativeElement.contains(targetElement)) {
this.onClickOutside.emit(event);
}
}
}
}
<div clickOutside (onClickOutside)="onClickOutside()">
...
</div>
在一个名为ng-click-outside的 npm 模块中有一个指令。
安装:npm install --save ng-click-outside
阅读以下链接中的完整文档:
推荐阅读
- microservices - API网关生产
- oracle - Oracle 存储过程中集合的默认值
- appium - 使用 AppiumLibrary 获取当前 URL - RobotFramework
- r - 如何从在单个命令中生成 3 个图形的函数在一个图形中绘制多个折线图?
- node.js - 使用 NodeJS 访问 Firebird 数据库时出现未知表错误
- javascript - 如何使用静态 getDerivedStateFromProps 对用户进行身份验证和正确导航
- java - 在使用 tomcat for java web 应用程序的 linux 机器上,当我从 tomcat 运行应用程序时,文件/文件夹创建/修改权限被拒绝问题
- html - 在响应版本中显示块
- powershell - 使用 powershell 过滤 CSV 文件
- c++ - 为什么这个循环中需要分号?