在角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不包含可拖动的功能在以下在ngOnInit（）函数中行。

this.elem.nativeElement.draggable({ 

如何替换此调用？

Answer 1

因为draggable和css都是jquery插件函数，所以我包含了jquery变量并像这样使用它。

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

和

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

我声明如下

declare var $: any; 

Answer 2

tslint jQuery的$变量不知道的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