ag-grid - 如何在 ag-grid-angular 的框架中使用多个自定义组件？

Question

我创建了两个自定义组件，即自定义工具提示组件和自定义日期选择器组件。当我试图在框架中声明它不起作用。它只采用日期选择器自定义组件而不是工具提示组件。如果删除了 datepicker 组件，那么它的工具提示组件只考虑 frameworkComponent 中的一个自定义组件。请找到以下代码：

自定义工具提示：

import {Component, ViewEncapsulation} from '@angular/core';
import {ITooltipAngularComp} from "ag-grid-angular";

@Component({
    selector: 'tooltip-component',
    template: `
        <div class="custom-tooltip" [style.background-color]="data.color">
            <p>{{tooltipData}}</p>
        </div>`,


    styles: [
        `
            :host {
                position: absolute;
                width: 250px;
                height: 60px;
                border: 1px solid cornflowerblue;
                overflow: hidden;
                pointer-events: none;
                transition: opacity 1s;
            }

            :host.ag-tooltip-hiding {
                opacity: 0;
            }

            .custom-tooltip p {
                margin: 5px;
                white-space: nowrap;
            }
        `
    ],
    styleUrls: ['./custom-tooltip.component.scss']
})
export class CustomTooltip implements ITooltipAngularComp {

     params: any;
     data: any;
    tooltipData: any;

    agInit(params): void {
        console.log("params",params.value);
        this.params = params;
        this.tooltipData=params.value;
        this.data = params.api.getRowNode(params.rowIndex).data;
        this.data.color = this.params.color || 'white';
    }
}

自定义日期组件：

import {Component, ElementRef, ViewChild} from '@angular/core';
import flatpickr from 'flatpickr'

@Component({
    selector: 'app-loading-overlay',
    template: `
        <div #flatpickrEl class="ag-input-text-wrapper custom-date-filter fa">
            <input type='text' data-input />
            <a class='input-button' title='clear' data-clear>
                <i class='fa fa-times'></i>
            </a>&nbsp;
            <a class="input-button" title="toggle" data-toggle>
            <i class="fa fa-calendar"></i>
            </a> &nbsp;&nbsp;
        </div>
    `,
    styles: [
        `
    .custom-date-filter a {
    position: relative;
    right: 34px;
    color: rgba(0, 0, 0, 0.54);
    cursor: pointer;
  }

  .custom-date-filter:after {
    content: '\f073';
    display: block;
    font-weight: 400;
    font-family: 'Font Awesome 5 Free';
    position: relative;
    right: 25px;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.54);
  }
    `
    ]
})
export class CustomDateComponent {
    @ViewChild("flatpickrEl", {read: ElementRef}) flatpickrEl: ElementRef;
    private date: Date;
    private params: any;
    private picker: any;

    agInit(params: any): void {
        this.params = params;
    }

    ngAfterViewInit(): void {
        // outputs `I am span`
        this.picker = flatpickr(this.flatpickrEl.nativeElement, {
            onChange: this.onDateChanged.bind(this),
            wrap: true
        });

        this.picker.calendarContainer.classList.add('ag-custom-component-popup');
    }

    ngOnDestroy() {
        console.log(`Destroying DateComponent`);
    }

    onDateChanged(selectedDates) {
        this.date = selectedDates[0] || null;
        this.params.onDateChanged();
    }

    getDate(): Date {
        return this.date;
    }

    setDate(date: Date): void {
       this.date = date || null;
       this.picker.setDate(date);
    }
}

我试图在一个网格中使用两个自定义组件，即：

 this.columnDefs = [
      {
        headerName: 'Request Number', field: 'request_no', sortable: true, filter: 'agNumberColumnFilter'
      },
      {
        headerName: 'Request Date', field: 'created_at', sortable: true, width: 300,
        filter: "agDateColumnFilter",
        filterParams: {
          comparator: function (filterLocalDateAtMidnight, cellValue) {
            var dateAsString = cellValue;
            var dateParts = dateAsString.split("/");
            var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));
            if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
              return 0;
            }
            if (cellDate < filterLocalDateAtMidnight) {
              return -1;
            }
            if (cellDate > filterLocalDateAtMidnight) {
              return 1;
            }
          }
        }
      },
      { headerName: 'Requested By', field: 'user_name', sortable: true, filter: 'agTextColumnFilter', tooltipField: 'user_name' },
      {
        headerName: 'Client', field: 'borrower_name', sortable: true, filter: 'agTextColumnFilter',
        tooltipField: 'borrower_name', tooltipComponentParams: { color: "#ececec" }, width: 200
      },
      {
        headerName: 'Debtor', field: 'customer_name', sortable: true, filter: 'agTextColumnFilter',
        cellStyle: { color: 'blue', cursor: 'pointer' }, tooltipField: 'customer_name', width: 200
      },
      {
        headerName: 'Current Limit', field: 'current_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      {
        headerName: 'Requested Limit', field: 'requested_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      {
        headerName: 'Approved Limit', field: 'approved_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      { headerName: 'Status', field: 'status', sortable: true, filter: 'agTextColumnFilter', width: 120, },
      { headerName: 'Comment', field: 'comment', sortable: true, filter: 'agTextColumnFilter', tooltipField: 'comment', width: 200 },
      {
        headerName: "",
        suppressMenu: true,
        suppressSorting: false,
        cellClass: 'action-class',
        width: 120,
        template:
          `<i class="fa fa-pencil-square-o" aria-hidden="true" data-action-type="view" pTooltip="Edit Queue" tooltipPosition="top"></i> 
          &nbsp; <i class="fa fa-info-circle" aria-hidden="true" data-action-type="history"  pTooltip="View Comment History" tooltipPosition="top"></i>`
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      sortable: true,
      tooltipComponent: "customTooltip",
      resizable: true
    };
    this.frameworkComponents = { 
       customTooltip: CustomTooltip,
       agDateInput: CustomDateComponent };

标签： ag-gridag-grid-ng2ag-grid-angular

Answer 1

似乎这是一个自定义tooltip问题（在 ag-grid 内部），将尝试通知团队并描述错误。

在您的情况下，您可以CustomDateComponent直接通过cellEditorFramework而不是指定您的组件（），而无需在块cellEditor中进行内部声明。frameworkComponents

{
    headerName: "Date",
    field: "date",
    width: 190,
    editable:true,
    cellEditorFramework:CustomDateComponent
}

仅供参考：您CustomDateComponent尚未准备好用作cellEditor