angular - 如何从 ag-grid 中的自定义浮动过滤器组件打开过滤器菜单？

Question

我想从 Angular 2+ 中的自定义浮动过滤器组件中打开带有过滤器选项的小菜单。
就像在官方文档中一样，应该可以有一个浮动输入字段，旁边有一个图标。 我设法创建了一个对我来说很好的自定义浮动组件，唯一的问题是打开小菜单来选择过滤器选项，就像在浮动过滤器的默认实现中一样（见下图）。

你能告诉我如何从自定义浮动过滤器中打开这个菜单，或者至少默认组件是如何做到这一点的吗？

这是我的一些代码：

打字稿

export interface TextFloatingFilterChange {
  model: SerializedTextFilter
}

export interface TextFloatingFilterParams extends IFloatingFilterParams<SerializedTextFilter, TextFloatingFilterChange> {
  value: string
}

@Component({
  selector: 'floating-text-filter',
  templateUrl: 'floating-text-filter.component.html',
  styleUrls: ['floating-text-filter.component.scss']
})
export class TextFloatingFilter implements IFloatingFilter<SerializedTextFilter, TextFloatingFilterChange, TextFloatingFilterParams>, AgFrameworkComponent<TextFloatingFilterParams>, AfterViewInit {
  private params: TextFloatingFilterParams;
  public currentValue: string;

  agInit(params: TextFloatingFilterParams): void {
    this.params = params;
    this.currentValue= '';
  }

  valueChanged() {
    this.params.onFloatingFilterChanged({model: this.buildModel()})
  }

  ngAfterViewInit(): void {
    this.valueChanged();
  }

  onParentModelChanged(parentModel: SerializedTextFilter): void {
    if(!parentModel) {
      this.currentValue = '';
    } else {
      console.log(parentModel);
      this.currentValue = parentModel.filter;
    }
  }

  private buildModel(): SerializedTextFilter {
    if(this.currentValue === '') {
      return null
    }
    return {
      filterType: 'text',
      type: 'contains',
      filter: this.currentValue
    }
  }

  public openFilterMenu(): void {
    console.log('open Menu');
  }
}