kendo ui 组合框在焦点上打开

Question

我正在制定指令以确保 kendo-combobox 在获得焦点时打开其菜单。这是我到目前为止得到的：

import { Directive, ElementRef, HostListener } from '@angular/core';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns'

@Directive({
  selector: 'kendo-combobox[openOnFocus]'
})
export class OpenOnFocusDirective {
  private combobox: ComboBoxComponent;
  constructor(el: ElementRef) {
    this.combobox = el.nativeElement as ComboBoxComponent;
  }

  @HostListener('focus') onFocus() {
    this.combobox.toggle(true);
  }


  @HostListener('blur') onBlur() {
    this.combobox.toggle(false);
  }
}

html:

<kendo-combobox openOnFocus ...>
</kendo-combobox>

但是“切换”命令没有做任何事情。阅读文档告诉我它应该打开（或关闭）下拉菜单。

https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ComboBoxComponent/

如有任何帮助，我们将不胜感激！

Answer 1

请尝试使用 ViewChild 而不是 ElementRef

export class OpenOnFocusDirective {
   @ViewChild(ComboBoxComponent) public combobox;

   @HostListener('blur') onBlur() {
      this.combobox.toggle(false);
   }

Answer 2

这是我在关注组合框组件时扩展下拉列表的工作解决方案：

指令：

import { Directive, HostListener, Input } from '@angular/core';
import { ComboBoxComponent } from '@progress/kendo-angular-dropdowns';

@Directive({
  selector: 'kendo-combobox[openOnFocus]'
})
export class OpenOnFocusDirective {

  @Input() openOnFocus: ComboBoxComponent;

  @HostListener('focus') onFocus() {
    this.openOnFocus.toggle(true);
  }

  @HostListener('blur') onBlur() {
    this.openOnFocus.toggle(false);
  }
}

Html:

<kendo-combobox #comboboxComponent [openOnFocus]="comboboxComponent" ...">
</kendo-combobox>

使用原生元素并没有给我组件，而是 html 元素。这就是为什么切换未定义且不起作用的原因。

使用 viewchild 也不是一个选项，因为指令本身没有 comboboxComponent 类型的子项。

kendo ui 组合框在焦点上打开

kendo ui combobox open on focus

angular

combobox

kendo-ui

directive