如何在 NoRowsOverlayComponent 中发出事件？

Question

我想显示一个包含按钮的覆盖容器。单击按钮时，应将事件传播到父组件。在我的研究中，我发现是设置 'noRowsOverlayComponentParams' 的选项，这在我的版本 (22.1.2) 中不存在。我也获取不到按钮的点击事件。

是否有解决方法或设置可以解决我的问题？

PS: 组件显示正确，但无法获取点击事件

网格选项：

let options: any = {
      defaultColDef: {
        sortable: true,
        filter: true,
        resizable: true
      },
      suppressPaginationPanel: true,
      columnDefs: [...],
      paginationPageSize: 10,
      context: { componentParent: this},
      domLayout: 'normal',
      enableCellTextSelection: true,
      autoSizePadding: 2,
      noRowsOverlayComponent: 'myNoRowsComponent',
      frameworkComponents: {
        myNoRowsComponent: MyNoRowsComponent
      }
    };

MyNoRowsComponent.ts:

import { Component } from '@angular/core';
import { INoRowsOverlayAngularComp } from '@ag-grid-community/angular';
import { INoRowsOverlayParams, IAfterGuiAttachedParams } from '@ag-grid-enterprise/all-modules';

@Component({
  selector: 'app-my-no-rows',
  templateUrl: './my-no-rows.component.html',
  styleUrls: ['./my-no-rows.component.scss']
})
export class MyNoRowsComponent implements INoRowsOverlayAngularComp {

  params: any;

  agInit(params: INoRowsOverlayParams): void {
    this.params = params;

  }

  clickImport() {
    // this.params.context.componentParent.clickButton(); // <-- here I want to emit an event
  }

  afterGuiAttached?(params?: IAfterGuiAttachedParams): void { }

}

MyNoRowsComponent.html:

<button (click)="clickImport()">My Button</Button>

Answer 1

我会创建一个共享服务，它被注入到父组件和覆盖组件中。

共享服务可以公开一个 'notify' 方法，该方法在 Subject 上调用 next。它还可以公开一个 'getNotifications'，returns Subject 作为 Observable。

那么父组件就可以订阅Observable了，覆盖层可以调用 'notify' 方法，将数据传递给父组件。

Answer 2

对于搜索此问题的人，我发现指针事件设置为禁用覆盖。只需将其添加到您的按钮 class:

pointer-events: all;

如何在 NoRowsOverlayComponent 中发出事件？

How to emit an event within a NoRowsOverlayComponent?

typescript

ag-grid

angular

ag-grid-angular