angular cli第三方库-jquery.floatThead 2.0.3

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

注意：如果您使用的是类型脚本，请确保为floatThead添加一个界面

可以按如下方式进行

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

转到你的打字.d.ts并添加

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

---

我希望有帮助

您的解决方案对我有效，但我无法删除jquery，因为引导程序需要jquery，如果我删除它，它会出错。还有其他解决方案吗？我也在使用bootstrap，但没有在angular-cli.json下显式包含bootsrap和jquery。您可以以不同的方式将bootsrap包含到项目中。这应该会有帮助。如果我能提供更多帮助，请告诉我。谢谢