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");
        }
    });

没有complitaion问题，但我收到此运行时错误，插件无法正常工作

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

看起来我甚至全局导入了jquery，它有一个问题jquery插件被加载。

有人可以在这种情况下建议什么是错误的。

Answer 1

我得到了相同的错误。

我是如何解决这个问题的。

首先，我确实从angular-cli.json删除了JQuery和floatThead＆＃34;导入＆＃34;
其次，我已经导入了jquery和floatThead，如下所示

导入*作为来自＆＃39; jquery＆＃39;
的$
导入＆＃39; floatThead＆＃39;

现在在我的组件 ngOnInit 中，它按预期工作。

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

注意：如果您使用打字稿，请务必为 floatThead 添加界面。

可以按照以下方式完成

转到 typings.d.ts 并添加

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

我希望它有所帮助。

angular-cli第三方图书馆 - jquery.floatThead 2.0.3

1 个答案: