在网格外呈现的自定义工具面板

Question

EDIT: thanks for the answers below. I haven't been able to solve it, but I have found the culprit in my project. Seems that the issue appears when putting the grid inside a material tab list that is generated with *ngFor I created an example where it goes wrong

我将 AG Grid v25 与 angular 11 一起使用。尝试构建自定义工具面板时，内容总是呈现在网格之外（网格下方）。即使我只是把一个普通的 <div>test</div> 作为工具面板 html 的内容。工具面板按钮显示并工作，但在内容呈现在网格下方时会打开一个空白面板。此外，内容始终可见，无论是否打开带有空白内容的自定义工具面板。

我没有收到任何错误或警告。我一直在尝试与 github 上发布的默认过滤器工具面板代码进行比较，但我不知所措。有什么我想念的吗？

正在组件中注册我的面板（我也将模块中的面板注册为文档状态）：

this.frameworkComponents = {
            userSettingsToolPanel: UserSettingsToolPanel
    };

边栏代码：

this.sideBar = {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel"
      },
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel"
      },
      {
          id: 'userSettingsToolPanel',
          labelDefault: 'Settings',
          labelKey: 'userSettingsToolPanel',
          iconKey: 'menu',
          toolPanel: 'userSettingsToolPanel',
        }
    ],
    hiddenByDefault: false,
    defaultToolPanel: null
  };

工具面板代码：

import { Component, ViewChild, ViewChildren, ViewContainerRef } from '@angular/core';
import { IToolPanel, IToolPanelParams } from '@ag-grid-community/all-modules';

@Component({
  selector: 'usersettings-panel',
  template: ` <div>test</div>`,
  styles: [``]
}

)
export class UserSettingsToolPanel implements IToolPanel {

  refresh(): void {
    throw new Error('Method not implemented.');
  }
  private params: IToolPanelParams;

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


  }

}

Answer 1

你能试试设置popupParent吗？ https://www.ag-grid.com/angular-grid/context-menu/#popup-parent

popupParent: Element;

constructor() {
    this.popupParent = document.querySelector('body');
  }

<ag-grid-angular [popupParent]="popupParent">
</ag-grid-angular>

在网格外呈现的自定义工具面板

Custom toolpanel rendered outside of grid

ag-grid

ag-grid-angular