Заменить перемещаемую функцию угловой 2

Question

Я пытаюсь преобразовать угловую директиву написанной в угловом 1. * угловой 2.

Здесь есть исходный код директивы:

this.directiveModule.directive('draggable', function(CONFIG) { 
return { 
    restrict: 'A', 
    link: function(scope, elem, attrs) { 
    var setInitPosition; 
    setInitPosition = function() { 
     return elem.css({ 
     top: scope.position.top + 'px', 
     left: scope.position.left + 'px' 
     }); 
    }; 
    elem.draggable({ 
     containment: "parent", 
     stop: function(ev, ui) { 
     return scope.position = { 
      top: ui.position.top, 
      left: ui.position.left 
     }; 
     } 
    }); 
    return setInitPosition(); 
    } 
}; 

});

Я превратил его в угловую 2 директивы следующим образом:

@Directive(
{ 
    selector: "[draggable]" 
} 
) 
export class DraggableDirective implements OnInit{ 

@Input() position: any; 
@Output() setPosition: EventEmitter<any> = new EventEmitter(); // assign position to scope.designElement 

constructor(private elem: ElementRef){} 

setInitPosition() { 
    this.elem.nativeElement.css({ 
     top: this.position.top + 'px', 
     left: this.position.left + 'px' 
    }); 
}; 

ngOnInit(){ 
    this.elem.nativeElement.draggable({ 
     containment: "parent", 
     stop: this.stopDrag 
    }); 
    this.setInitPosition(); 
} 

stopDrag(ev, ui){ 
    let position = { 
     top: ui.position.top, 
     left: ui.position.left 
    }; 
    this.setPosition.emit(position); 
} 
} 

Но когда я использую эту новую директиву на элементе, я получаю сообщение об ошибке говорящего elem.nativeElement не содержит перемещаемую функцию в следующем line в функции ngOnInit().

this.elem.nativeElement.draggable({ 

Как заменить этот вызов?

Answer 1

Поскольку draggable и css являются функциями jquery plugin, я включил переменную jquery и использовал ее так.

$(this.elem.nativeElement).draggable(...) 

и

$(this.elem.nativeElement).css(...) 

Я объявил JQuery переменную $ как этот

declare var $: any; 

Answer 2

tslint ничего не говорит о качестве члена "перетаскиваемом" из JQuery не знаю.

Вы должны добавить это свойство к определению типа в конце /typings/jquery/jquery.d.ts

interface JQuery { 
    draggable(options?:any):JQuery; 
} 

Если у вас нет jquery.d.ts, сначала нужно установить определение JQuery для машинописи

tsd install jquery --save 

и включают в себя

/// <reference path="typings/jquery/jquery.d.ts" /> 

в файл TS.

Эта информация основана на https://stackoverflow.com/a/30662773