angular-cli 第三方库 - jquery.floatThead 2.0.3答案

【问题标题】：angular-cli 3rd Party Library - jquery.floatThead 2.0.3angular-cli 第三方库 - jquery.floatThead 2.0.3
【发布时间】：2018-04-30 04:29:00
【问题描述】：

我想在我的 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 插件时出现问题。

有人可以建议在这种情况下有什么问题吗？

【问题讨论】：

标签： angular webpack angular-cli

【解决方案1】：

我遇到了同样的错误。

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

首先，我确实从 angular-cli.json "imports" 中删除了 JQuery 和 floatThead
其次，我已经导入了jquery和floatThead，如下

从'jquery'导入*为$

导入'floatThead'

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

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

注意：如果您使用 typescript，请确保为 floatThead 添加接口。

可以如下实现

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

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

我希望它有所帮助。

【讨论】：

您的解决方案对我有用，但我无法删除 jquery，因为引导程序需要 jquery，如果我删除它会出错。还有其他解决方案吗？
我也在使用 bootstrap，但没有在 angular-cli.json 下明确包含 bootsrap 和 jquery。
您可以以不同的方式将 bootsrap 包含到您的项目中。这应该会有所帮助。 stackoverflow.com/questions/50290197/…。让我知道我是否可以提供更多帮助。谢谢。