如何在一个ag-grid cellEditor组件中渲染angular指令？

import { Component, ViewChild, ViewContainerRef, ElementRef, Renderer2, OnDestroy } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-custom-cell-editor',
  template: `
    <div #container></div>
  `,
})
export class CustomCellEditorComponent implements ICellEditorAngularComp, OnDestroy {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  agInit(params: any): void {
    // 获取传入的参数
    const { value } = params;

    // 创建包含指令的元素
    const element = this.renderer.createElement('div');
    this.renderer.setAttribute(element, 'directive-name', value); // 替换directive-name为实际指令名称

    // 将创建的元素添加到组件的DOM中
    this.renderer.appendChild(this.container.element.nativeElement, element);
  }

  getValue(): any {
    // 返回编辑后的值
    return this.elementRef.nativeElement.value;
  }

  ngOnDestroy(): void {
    // 在组件销毁时移除创建的元素，避免内存泄漏
    const element = this.container.element.nativeElement.firstChild;
    this.renderer.removeChild(this.container.element.nativeElement, element);
  }
}

{
  headerName: 'Column Name',
  field: 'fieldName',
  cellEditor: 'appCustomCellEditor',
  cellEditorParams: {
    value: 'directive-name' // 替换directive-name为实际指令名称
  }
}