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

我创建了两个自定义组件，即自定义工具提示组件和自定义日期选择器组件。当我试图在框架中声明它不工作时。 它只使用datepicker自定义组件，而不是工具提示组件。如果删除了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';
    }
}

从'@angular/core'导入{Component，ViewEncapsulation}；
从“ag网格角度”导入{ITOLTIPANGULARCOMP}；
@组成部分({
选择器：“工具提示组件”，
模板：`
{{tooltipData}}

`,
风格：[
`
：主持人{
位置：绝对位置；
宽度：250px；
高度：60px；
边框：1件纯色矢车菊蓝；
溢出：隐藏；
指针事件：无；
过渡：不透明度1s；
}
：host.ag-tooltip-hiding{
不透明度：0；
}
.自定义工具提示{
保证金：5px；
空白：nowrap；
}
`
],
样式URL:['./自定义工具提示.component.scss']
})
导出类CustomTooltip实现了ITooltipAngularComp{
参数：任何；
资料：有；
工具提示数据：任何；
agInit（参数）：无效{
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 | | |“白色”；
}
}

CustomDateComponent：

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

从'@angular/core'导入{Component，ElementRef，ViewChild}；
从“FlatPicker”导入FlatPicker
@组成部分({
选择器：'应用程序加载覆盖'，
模板：`
`,
风格：[
`
.自定义日期筛选器a{
位置：相对位置；
右：34px；
颜色：rgba（0,0,0,0.54）；
光标：指针；
}
.自定义日期筛选器：在{
内容：'\f073'；
显示：块；
字体大小：400；
字体系列：“字体真棒5免费”；
位置：相对位置；
右：25px；
指针事件：无；
颜色：rgba（0,0,0,0.54）；
}
`
]
})
导出类CustomDateComponent{
@ViewChild（“flatpickrEl”，{read:ElementRef}）flatpickrEl:ElementRef；
私人日期：日期；
私人参数：任何；
私人采摘人：任何；
agInit（参数：任意）：无效{
this.params=params；
}
ngAfterViewInit（）：void{
//我是斯潘`
this.picker=flatpicker（this.flatpickrEl.nativeElement{
onChange:this.onDateChanged.bind（this），
包装：对
});
this.picker.calendarContainer.classList.add（'ag-custom-component-popup'）；
}
恩贡德斯特罗（）{
log（`DateComponent`）；
}
onDateChanged（选定日期）{
this.date=selectedDates[0]| |空；
this.params.onDateChanged（）；
}
getDate（）：日期{
返回此日期；
}
设置日期（日期：日期）：无效{
this.date=date | | null；
this.picker.setDate（日期）；
}
}

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

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

this.columnDefs=[
{
标题名称：“请求编号”，字段：“请求编号”，可排序：true，筛选器：“agNumberColumnFilter”
},
{
标题名称：“请求日期”，字段：“创建时间”，可排序：true，宽度：300，
过滤器：“agDateColumnFilter”，
过滤器参数：{
比较器：函数（filterLocalDateAtMidnight，cellValue）{
var dateAsString=cellValue；
var dateParts=dateAsString.split（“/”）；
var cellDate=新日期（编号（日期部分[2]），编号（日期部分[1]）-1，编号（日期部分[0]）；
if（filterLocalDateAtMidnight.getTime（）==cellDate.getTime（））{
返回0；
}
if（cellDatefilterLocalDateAtMidnight）{
返回1；
}
}
}
},
{headerName:'Requested By'，field:'user_name'，sortable:true，filter:'agTextColumnFilter'，tooltipField:'user_name'}，
{
标题名称：“客户”，字段：“借款人名称”，可排序：true，筛选器：“agTextColumnFilter”，
tooltipField:'借用者名称'，tooltipComponentParams:{color:#ececec}，宽度：200
},
{
headerName:'债务人'，字段：'客户名称'，可排序：true，筛选器：'agTextColumnFilter'，
单元格样式：{color:'blue'，cursor:'pointer'}，tooltipField:'customer_name'，宽度：200
},
{
headerName:“当前限制”，字段：“当前限制”，可排序：true，筛选器:“agNumberColumnFilter”，
cellStyle:{textAlign:'right'}，
cellRenderer:this.CurrencyCellRenderer
},
{
headerName:“请求的限制”，字段：“请求的限制”，可排序：true，筛选器：“agNumberColumnFilter”，
cellStyle:{textAlign:'right'}，
cellRenderer:this.CurrencyCellRenderer
},
{
headerName:“批准的限额”，字段：“批准的限额”，可排序：true，筛选器：“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}，
{
头名：“，
是的，
排序：false，
cellClass:“动作类”，
宽度：120，
模板：
` 
`
}
];
这个是
{
    headerName: "Date",
    field: "date",
    width: 190,
    editable:true,
    cellEditorFramework:CustomDateComponent
}