从指令组件访问控制器组件功能

Question

我正在尝试在 Angular 2 中创建一个简单的指令，这样我就可以在我的页面上使用 jQuery UI 排序。

目前我卡在了让 sortable directive 知道它应该在页面 Component 上调用什么函数的地步。我想要这个，因为您可以在可排序插件中的事件上注册函数。我希望指令在页面的组件上调用该函数。

我目前有这个：

@Directive({
    selector: '[sortable]'
})
export class SortableDirective {

    stopSortingEvent: any;

    constructor(el: ElementRef) {
        this.stopSortingEvent = el.nativeElement.getAttribute('stopSortingEvent');

        if(this.stopSortingEvent) {
          options['stop'] = this.stopSortingEvent; // This should be a reference to a function in the page Component.
        }

        $(el.nativeElement).sortable(options).disableSelection();
    }
}

所以我的想法是创建一个带有 sorting 属性的 HTML 元素。包含具有 stop-sorting-event="functionOnComponent()".

的属性

这应该是当前页面组件上的一个函数。但显然这不是这样的。我的指令不知道它必须尝试在另一个组件上调用它。

那我该怎么做呢？有没有办法获取对我的页面组件的引用？

更新

我认为 pixelbits 的建议很好，使用带有 @Output 注释的事件。但是，让它与 jQueryUI 结合使用似乎很棘手。似乎 jQueryUI 无法读取我指令的属性。

这是一个演示，可以更好地理解我的意思：http://plnkr.co/edit/Hfc5vxuMLW6yQwr4qW2W?p=preview

Answer 1

事实上，您可以从构造函数中注入指令所附加的组件，并将函数名称作为参数传递：

@Directive({
  selector: '[sortable]'
})
export class SortableDirective {
  @Input('sortable')
  stopSortingEvent:string;

  constructor(el: ElementRef, page: PageComponent) {
    if(this.stopSortingEvent) {
      options['stop'] = page[stopSortingEvent].bind(page);
    }

    $(el.nativeElement).sortable(options).disableSelection();
  }

然后您可以像这样传递方法名称：

<div sortable="stopSortingEvent">(...)</div>

Answer 2

如果想在父组件中处理事件，可以设置父组件可以处理的Output事件：

@Directive({
    selector: '[sortable]'
})
export class SortableDirective {
    @Output() stopSort:EventEmitter<any> = new EventEmitter();

    constructor(el: ElementRef) {
        var options = { 
           stop: () => {
              this.stopSort.emit();
           }
        };

        $(el.nativeElement).sortable(options).disableSelection();
    }
}

然后在你的父组件中：

<div (stopSort)="stopSortingEvent()" sortable>(...)</div>

从指令组件访问控制器组件功能

Access controller component function from a Directive component

angular

angular2-directives

更新