Блог

Я пытаюсь отобразить фильтр (ы) в 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.

Проблема заключалась в том, что я использовал [innerHTML]="data.filterHtml?.innerHTML | safeUrl: 'html' " который лишает какой-либо функциональности по соображениям безопасности ( XSS ). Решения заключались в том, чтобы присвоить идентификатор div и добавить html из 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));
  }

}

  

Благодаря этим изменениям я смог правильно и функционально отобразить фильтр.