剑道 ui 组合框在焦点上打开答案

【问题标题】：kendo ui combobox open on focus剑道 ui 组合框在焦点上打开
【发布时间】：2020-07-10 15:56:53
【问题描述】：

我正在制定一个指令，以确保剑道组合框在获得焦点时会打开其菜单。这是我到目前为止得到的：

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/

任何帮助将不胜感激！

【问题讨论】：

你试过@ViewChild吗？

标签： angular combobox kendo-ui directive

【解决方案1】：

请尝试使用ViewChild 而不是ElementRef

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

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

【讨论】：

恐怕这行不通。组合框未定义。我将把使用该指令的 html 代码放入其中，以使其成为一个更完整的问题。如果我按照我的问题组合框中的结构运行我的代码，那么它就有一个值；但切换不做任何事情。

【解决方案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 类型的子项。

【讨论】：