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

Question

编辑： 感谢以下回答。我没能解决它，但我在我的项目中找到了罪魁祸首。 似乎 将网格放在材料选项卡列表中时出现问题 是用*ngForI 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>