Angular语言 - CLI第三方库-JQuery.FloatThead 2.0.3

Question

我想在我的angular2应用中使用floatthead。我已经安装了jQuery作为全球库。

在Angular-Cli.json

中

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js",
              "../node_modules/ngx-rating/ngx-rating.pure.amd.js",
              "../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
              "../node_modules/floatthead/dist/jquery.floatThead.min.js"
              ],

在组件中，我已经导入了jQuery和floatthead，如下所示

    import * as $ from 'jquery';
    import * as floatThead from 'floatThead';
    ...
    $('card-list-table').floatThead({top:110,
        responsiveContainer: function($table){ 
            return $table.closest(".table-responsive");
        }
    });

没有拟议问题，但是我遇到了此运行时错误，并且插件不起作用

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery__(...).floatThead is not a function
    at CustomerListComponent.webpackJsonp.../../../../../src/app/

看起来我甚至在全球范围内导入了jQuery，它都有一个问题jQuery插件。

有人可以在这种情况下建议您错。

Answer 1

我遇到相同的错误。

在这里我如何解决这个问题。

• 首先，我确实从angular-cli.json" imports"
中删除了jQuery和floatthead
• 第二，我已经导入了jQuery和floatthead，如下所示

import * as $从'jquery'

导入'floatthead'

现在在我的组件中 ngoninit 它可以按预期工作。

ngOnInit() {
    $(this.el.nativeElement).floatThead({top:40,
      responsiveContainer: ($table) => {
        debugger
        return $table.closest(".table-responsive");
      }
    }); 
}

NOTE ：如果您使用的是 typescript 请确保添加 floatthead的接口。

可以如下完成

转到您的 typings.d.ts 并添加

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

我希望它有帮助。