时间戳

首页 > 解决方案 > 在对话框中渲染过滤器组件

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

问题描述

我正在尝试在 a 中渲染过滤器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。

标签： javascriptangularag-gridag-grid-angular

解决方案

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

对话框 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));
  }

}

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

推荐阅读