在Ag-grid外部单击时，从AgGrid移除Focus [英] Remove Focus from AgGrid when click outside the ag-grid

问题描述

我正在网站上使用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 = this.commonAgGrid.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:

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


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


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

1. clicks listener should be implemented inside your custom component, cuz only withing this component you can bind listener for tracking click-outside event
2. listener should be implemented inside ngAfterViewInit method cuz of @ViewChild rendering lifecycle
3. @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)

这篇关于在Ag-grid外部单击时，从AgGrid移除Focus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！