Question

我试图在Angular 2中创建一个简单的指令，所以我可以在我的页面上使用jQuery UI Sortables。

目前，我仍然希望让可排序的directive知道它应该在页面Component上调用哪个函数。我想要这个，因为您可以在可排序插件中的事件上注册函数。我希望该指令在页面的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()"的属性。

这应该是当前页面组件的功能。但很明显，它并没有像这样工作。我的指令并不知道它必须尝试在另一个组件上调用它。

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

更新

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

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

Answer 1

如果要处理父组件中的事件，可以设置父组件可以处理的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>

Answer 2

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

@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>

从指令组件

更新

2 个答案: