在网格外部渲染的自定义工具面板

Question

编辑： 感谢您提供以下答案。我还没能解决它，但我已经在我的项目中找到了罪魁祸首似乎将网格放入材质选项卡列表时出现问题是用*ngFor生成的，我创建了一个例子错误的

我使用的是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-母

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

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

Answer 2

我遇到过类似的问题，自定义工具面板在正常页面中正确渲染，但在网格位于<p-dialog>(PrimeNG，灯箱对话框组件(内部时在网格外渲染。

我设法通过仅使用<div>...</div>包装<ag-grid-angular...>标签来解决问题。

我认为，当网格被转换为另一个组件中的子内容时，这可能是一个错误。