[英]Click outside angular component
我知道围绕这个有无数的问题,我尝试了每一个解决方案,但没有一个适合我的需求。 尝试过指令,直接在我的组件中尝试过,但一次都没有用。
所以我的情况是这样的; 我有一个 tableview,在每个 tableview 的末尾,您可以通过单击图标打开一个小下拉列表。 弹出的下拉菜单是一个小组件。 所以在我的父组件中它看起来像这样;
<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
。 每一次外部点击都会被多次触发。 检查我是否在操作元素之外单击就变成了一种负担,因为它会为所有其他hostlisteners
呈现 false,而对于活动的hostlisteners
呈现 true。
这个问题在这个 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
阅读以下链接中的完整文档:
我对类似情况使用了指令。 安装:
npm install --save ng-click-outside
然后导入你的模块
import { ClickOutsideModule } from 'ng-click-outside';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ClickOutsideModule],
bootstrap: [AppComponent]
})
class AppModule {}
在您的组件中
@Component({
selector: 'app',
template: `
<div (clickOutside)="onClickedOutside($event)">Click outside this</div>
`
})
export class AppComponent {
onClickedOutside(e: Event) {
console.log('Clicked outside:', e);
}
}
它有一些选择。 你可以在https://www.npmjs.com/package/ng-click-outside看到
问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.