2

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

目前我被困在我想让可排序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()".

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

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

更新

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

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

4

2 回答 2

3

如果要处理父组件中的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>
于 2016-02-13T15:36:14.740 回答
0

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

@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>
于 2016-02-13T12:03:37.563 回答