如何在Angular自定义指令中访问宿主Kendo DropDownList组件实例

问题根因 #

你在构造函数中直接注入DropDownListComponent的写法，会让Angular依赖注入器从全局provider中查找对应实例，而宿主组件实例并没有注册为全局provider，因此会抛出无provider的错误。你需要通过装饰器明确指定，从当前指令绑定的宿主元素上获取组件实例。

修复步骤 #

1. 在指令的依赖注入参数前添加@Host()和@Self()装饰器，限定注入器仅从当前宿主元素查找目标组件实例
2. 监听宿主的esc按键事件，结合下拉组件的isOpen状态判断是否需要阻止事件冒泡

完整代码示例 #

指令代码 #

import { Directive, Host, Self, HostListener } from '@angular/core';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

@Directive({
  selector: '[appDdclose]'
})
export class DdcloseDirective {
  constructor(@Host() @Self() public component: DropDownListComponent) {}

  @HostListener('keydown.esc', ['$event'])
  handleEsc(event: KeyboardEvent) {
    // 下拉展开时阻止事件冒泡，不影响kendo自带的关闭下拉逻辑
    if (this.component.isOpen) {
      event.stopPropagation();
    }
  }
}

模板使用方式（和原有写法一致） #

<kendo-dropdownlist appDdclose  [data]="listItems" ></kendo-dropdownlist>

注意事项 #

• 确保你的功能模块已经导入了Kendo的DropDownsModule
• 确保DdcloseDirective已经在所属模块的declarations数组中声明

内容的提问来源于stack exchange，提问作者Rohit Raisinghani