Webpack - 无法使用引导工具提示

时间:2017-01-09 09:30:07

标签: jquery angular webpack twitter-bootstrap-tooltip

我使用angular-cli和Webpack作为Angular2项目。

我已经从angular-cli.json文件全局加载了jquery,bootstrap.css和bootstrap.js文件。配置如下 -

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

我还从DefinetlyTyped下载了bootstrap typings文件,并在我想要的组件中使用/// <reference path="@types/bootstrap" />将它们作为参考添加。

但是当我执行工具提示初始化函数时 $('[data-toggle="tooltip"]').tooltip();

我不断收到错误 - :

Typeerror_handler.js:53TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery__(...).tooltip is not a function
    at HeaderComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:759:73)
    at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:74:74)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:69363:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:69456:44)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:69363:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:69456:44)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:51541:20)
    at http://localhost:4200/vendor.bundle.js:36682:84
    at Array.forEach (native)

我做错了什么?

有人可以帮我解决这个问题吗?当我不得不使用typeahead.js时,我使用相同的方法,并且完美无缺,但为什么它不在这里工作?

1 个答案:

答案 0 :(得分:0)

我使用new Function()解决了类似的问题。 代码示例:

new Function('cell', 'jQuery("[data-toggle=tooltip]", cell).tooltip();')(cellNode);