2

ページでjQuery UI Sortablesを使用できるように、Angular 2で簡単なディレクティブを作成しようとしています。

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注釈付きのイベントを使用して、pixelbits の提案は素晴らしいと思います。しかし、jQueryUI と組み合わせて動作させるのは難しいようです。jQueryUI がディレクティブのプロパティを読み取れないようです。

ここに、私が何を意味するかをよりよく理解するためのデモがあります: http://plnkr.co/edit/Hfc5vxuMLW6yQwr4qW2W?p=preview

4

2 に答える 2