在Ag

本文介绍了在Ag-grid外部单击时，从AgGrid移除Focus的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在网站上使用AG Grid。当用户单击一个单元格时，它会被聚焦并显示一个蓝色轮廓。 当用户在所选元素之外单击时，我需要删除此焦点。

I'm using AG Grid on a website. When the user clicks a cell, it is focused and gets a blue outline. I need to remove this focus when the user clicks outside the selected element.

const body = document.body; body.addEventListener('mouseup', (e) => { const container = thismonAgGrid.nativeElement; if (!container.contains(e.target)) { this.gridApi.clearFocusedCell(); } });

但是当我在ag-grid中使用mat select组件时，这不起作用。示例-朋克

But this is not working when I am using mat select component in ag-grid. Example- plunker

请更改下拉列表的值，该值不会因此改变。

Please change the dropdown value, the value won't change because of this.

推荐答案

好的，这里您需要了解以下内容：

Ok, here what you need to understand:

点击监听器应该在您的自定义组件内实现，仅 cuz有了这个组件，您就可以绑定监听器来跟踪点击事件

listener 应该在内部实现 ngAfterViewInit 方法的cuz of @ViewChild 渲染生命周期

@ViewChild 要求获取元素和其范围-以便进行外部点击跟踪

clicks listener should be implemented inside your custom component, cuz only withing this component you can bind listener for tracking click-outside event

listener should be implemented inside ngAfterViewInit method cuz of @ViewChild rendering lifecycle

@ViewChild requires to get element and his scope - for outside-click tracking possibility

因此，您需要将 ViewChild -绑定到模板（自定义内部

So you need to have ViewChild - bound to your template (inside custom component)

@ViewChild('yourElementRef') public yourElementRef:ElementRef

然后，将该属性 yourElementRef 绑定到模板（标签（div，表单，其他内容）应基于HTML-不是来自第三方库的指令-可能缺少cuz引用）

Then, bound this property yourElementRef to the template (tag (div, form, whatever) should be HTML based - not directive from third party libraries - cuz reference could be missed)

template: ` <mat-card> <form #yourElementRef class="container" tabindex="0" (keydown)="onKeyDown($event)"> ...

再次输入＃ < mat-cad> 中的yourElementRef -将会丢失本机元素引用

again if you put #yourElementRef in <mat-cad> - native element reference would be missed

最后一件事是跟踪自己

ngAfterViewInit() { ... let body = document.body; body.addEventListener("mouseup", (e) => { let container = this.yourElementRef.nativeElement; if (!container.contains(e.target)){ this.params.api.clearFocusedCell(); } }) }

演示

PS：这是选择重置的解决方案仅，就此示例而言-值（模型）未正确更新（因为实施错误）

P.S: this is a solution for selection reset ONLY, on exact this example - values (models) doesn't update properly (cuz it's just wrong implemented)