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

【问题标题】：Render filter component in a dialog在对话框中渲染过滤器组件
【发布时间】：2020-12-27 21:14:55
【问题描述】：

我正在尝试在 mat-dialog 中渲染过滤器，我发现它可以正确渲染，但在功能上不可用，我不确定这是否正确。

这里是代码

这是我创建和打开对话框的方式：

  public lol(colDef: ColDef): void {
    console.log(colDef);

    this.gridApi?.getFilterInstance(colDef.field, (foo) => {
      console.log(foo.getModel());
      foo.setModel(foo.getModel());

      this.dialog.open(FilterWrapperDialogComponent, {
        data: {
          filterHtml: foo.getGui()
        },
        panelClass: 'ag-custom-component-popup'
      }).afterClosed().subscribe((applyOrNot) => {
        if (applyOrNot) {
          this.gridApi.onFilterChanged();
          console.log(foo.getModel());
        }
      });
    })
  }

对话内容：


<mat-dialog-content>
  <div class="ag-theme-material ag-custom-component-popup" [innerHTML]="data.filterHtml?.innerHTML | safeUrl: 'html' "></div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button i18n [mat-dialog-close]="true" color="primary">Apply</button>
</mat-dialog-actions>

它可以正确呈现，但会失去功能。

我的目标是在不实际添加到 ag-grid 表的情况下设置过滤器，只需通过对话框和 ag-grid API。

【问题讨论】：

标签： javascript angular ag-grid ag-grid-angular

【解决方案1】：

问题是我使用[innerHTML]="data.filterHtml?.innerHTML | safeUrl: 'html' " 出于安全原因（XSS）剥离了任何功能。解决方案是给 div 一个 id 并附加来自getGui()的html

对话框 HTML：

<mat-dialog-content>
  <div class="ag-theme-material ag-custom-component-popup" id="second"></div>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button i18n [mat-dialog-close]="true" color="primary">Apply</button>
</mat-dialog-actions>

将 HTML 附加到 div；对话逻辑：

import { Component, ChangeDetectionStrategy, Inject, AfterViewInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-filter-wrapper-dialog',
  templateUrl: './filter-wrapper-dialog.component.html',
  styleUrls: ['./filter-wrapper-dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class FilterWrapperDialogComponent implements AfterViewInit {

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  ngAfterViewInit(): void {
    document.querySelector('#second').appendChild((this.data.filterHtml as HTMLElement));
  }

}

通过这些更改，我能够正确且功能性地渲染过滤器。

【讨论】：