Javascript 在对话框中渲染过滤器组件

我在一个

mat对话框中尝试渲染过滤器，我发现它渲染正确，但功能不可用，我不确定这是否正确

这是密码

以下是创建和打开对话框的方式：

公共lol（colDef:colDef）：无效{
console.log（colDef）；
this.gridApi？.getFilterInstance（colDef.field，（foo）=>{
log（foo.getModel（））；
setModel（foo.getModel（））；
this.dialog.open（FilterRapperDialogComponent{
数据：{
filterHtml:foo.getGui（）
},
panelClass:“ag自定义组件弹出窗口”
}).afterClosed（）.subscribe（（applyOrNot）=>{
如果（不适用）{
this.gridApi.onFilterChanged（）；
log（foo.getModel（））；
}
});
})
}

对话框内容包括：


申请

它可以正确渲染，但会失去功能

我的目标是设置一个过滤器，而不实际添加到ag网格表中，只需通过一个对话框和ag网格API即可。
问题在于我使用的是
[innerHTML]=“data.filterHtml？”.innerHTML | safeUrl:'html'
，它出于安全原因（XSS）剥离了任何功能。
解决方案是为div提供一个id，并从
getGui（）

对话框HTML:


申请

向div追加HTML；对话框逻辑：

import{Component，ChangeDetectionStrategy，Inject，AfterViewInit}来自“@angular/core”；
从“@angular/material/DIALOG”导入{MAT_DIALOG_DATA}；
@组成部分({
选择器：“应用程序筛选器包装器对话框”，
templateUrl:“./filter wrapper dialog.component.html”，
styleUrls:['./过滤器包装器对话框.component.scss']，
changeDetection:ChangeDetectionStrategy.Default
})
导出类FilterRapperDialogComponent在ViewInit之后实现{
建造师(
@注入（MAT_对话框_数据）公共数据：任意
) {}
ngAfterViewInit（）：void{
document.querySelector（“#second”）.appendChild（（this.data.filterthtml作为HTMLElement））；
}
}

通过这些更改，我能够正确地、有效地呈现过滤器