如何在Angular 2中包含JQuery插件?

时间:2017-09-04 06:02:50

标签: angular typescript angular-cli angular2-directives

我在角度2项目Link

中安装了jquery插件
npm i jquery-bootstrap-scrolling-tabs

并添加.angular-cli.json

 "styles": [
        "styles.css",
        "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
         "../node_modules/jquery-bootstrap-scrolling-tabs/dist/jquery.scrolling-tabs.js"
      ],

我声明了名副其实的typings.d.ts

declare var scrollingTabs:any;

在app.component.ts中使用

ngAfterViewInit() {
    $('.nav-tabs').scrollingTabs({
      scrollToTabEdge: true  
    });
  } 

错误:TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).scrollingTabs is not a function

2 个答案:

答案 0 :(得分:2)

你忘了添加jquery变量

declare var $ : any

有关如何添加jquery的更多信息,请使用带有和不带打字的LINK

答案 1 :(得分:1)

在组件文件中导入jquery。

declare let $ : any