Question

我正在尝试在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 API来设置过滤器，而无需实际添加到ag-grid表中。

Answer 1

问题是我出于安全原因（XSS）使用了[innerHTML]="data.filterHtml?.innerHTML | safeUrl: 'html' "剥离了所有功能。解决方案是给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>

在div上附加HTML；对话逻辑：

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));
  }

}

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

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

1 个答案: