Kendo UI for Angular 2 从指令访问组件

Question

我正在尝试创建一个将放置在 DropDownList 组件中的自定义指令。在指令的构造函数中，我想获得主机 DropDownList 组件的引用。

这是我的代码：

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

@Directive({
 selector: '[trackDDLChanges]'
})
export class TrackDDLChangesDirective {
 ddl: DropDownListComponent;

 constructor(elem: ElementRef) {
  this.ddl = elem.nativeElement; <-- how to get the reference of the component?
  
 }
}

我在文档中找不到任何内容。 ElementRef 给了我 html 元素，但我找不到将其转换为相应组件的方法。

在之前的版本中kendo我们可以这样做：

$(elem).data('kendoDropDownList')

获取对小部件的引用。

这个版本有类似的东西吗？

谢谢。

Answer 1

Angular 如果定义了正确的类型，DI 将注入组件实例：

@Directive({
  selector: '[custom-behavior]'
})
export class CustomDirective {
  constructor(ddl: DropDownListComponent) {
    console.log('test', ddl);
  }
}

http://plnkr.co/edit/V5jJASqJ7NxToXIerp5z?p=preview

Kendo UI for Angular 2 从指令访问组件

Kendo UI for Angular 2 Access component from directive

kendo-ui-angular2