我想从Angular 2+中的自定义浮动滤镜组件打开带有滤镜选项的小菜单
就像在official documentation中一样,它应该是一个浮动的输入字段,旁边有一个图标
我设法创建了一个自定义浮动组件,对我来说很好。唯一的问题是打开小菜单选择过滤器选项,如浮动过滤器的默认实现(见下图)。
您能告诉我如何从自定义浮动过滤器中打开此菜单,或者至少是默认组件如何设置这样做?
以下是我的一些代码:
打字稿
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');
}
}