上一篇: jquery – 选择后选择2随机播放选... 下一篇:webpack2 jquery编译挂起

jquery-ui – 如何使用@ types / jqueryui和angular2(typescript)

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-ui – 如何使用@ types / jqueryui和angular2(typescript)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想在我的角度应用程序中使用 jqueryui

我可以像这样导入jquery

import * as $from 'jquery';

但是如何从中导入’@ types / jqueryui’
https://www.npmjs.com/package/@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
    }
}

解决方法

解决方法:(不是@ 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>

零件：

在您的组件声明中

declare var $:any;

像这样在课堂上使用它

export class JqueryUIIntegrationComponent implements AfterViewInit {
    @ViewChild('jqueryElement') el:ElementRef;
    constructor() {
    }

    ngAfterViewInit() {
        console.log(this);
        $(this.el.nativeElement).draggable(); //same old style
    }
}

注意：欢迎通过@ types / jqueryui(正确方式)获得任何原生支持.如果您找到任何解决方案,请告诉我.