Jeb*_*nce 5 types jquery-ui typescript angular
我想在我的角度应用程序中使用jqueryui
我可以像这样导入jquery
import * as $ from 'jquery';
Run Code Online (Sandbox Code Playgroud)
但是如何从https://www.npmjs.com/package/@types/jqueryui导入'@ types/jqueryui'
由于jqueryui是一个接口,我无法导入它
我如何使用jquery
export class JqueryUIIntegrationComponent implements AfterViewInit{
@ViewChild('jqueryElement') el:ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this);
$(this.el.nativeElement).slideUp(4000).slideDown(5000); // jquery function
$(this.el.nativeElement).draggable(); //Since jqueryui is not imported this will not work
}
}
Run Code Online (Sandbox Code Playgroud)
解决方法:(不是通过@types/jqueryui 的解决方案)
您可以使用@types/jqueryui来支持输入/自动完成。
根 HTML:
导入jquery和jquery UI js文件
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Run Code Online (Sandbox Code Playgroud)
成分:
在你的组件中声明
declare var $:any;
Run Code Online (Sandbox Code Playgroud)
像这样在课堂上使用它
export class JqueryUIIntegrationComponent implements AfterViewInit {
@ViewChild('jqueryElement') el:ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this);
$(this.el.nativeElement).draggable(); //same old style
}
}
Run Code Online (Sandbox Code Playgroud)
注意:欢迎通过@types/jqueryui (正确的方式)提供任何本机支持。如果您找到任何解决方案,请告诉我。