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

这是我的工作解决方案，用于在获得对combobox组件的关注时扩展下拉列表：

指令：

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类型的子级。

Answer 2

请尝试使用ViewChild而不是ElementRef

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

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