在角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