将 jQuery 插件添加到 Angular 应用程序

Question

使用的框架

1. 角度：5.2.3
2. 基金会（Zurb）：6.2.4

使用

创建了一个角度应用程序

> ng new foundation-plugin-app --style=sass
> cd foundation-plugin-app
> npm install foundation-sites --save

在此之前一切都按预期工作。
然后我加了foundation-datepicker

> npm install foundation-datepicker --save

这就是插件的初始化方式。

$('#scenario_start_date').fdatepicker({
  initialDate: '02-12-1989',
  format: 'mm-dd-yyyy',
  disableDblClickSelection: true,
  leftArrow: '<<',
  rightArrow: '>>',
  closeIcon: 'X',
  closeButton: true
});

现在，要使其正常工作，请按照以下步骤操作 1.在app.component.ts中添加styleUrls

styleUrls: [
    // ...,
    '../../node_modules/foundation-datepicker/scss/foundation-datepicker.scss'    ]

2.在angular-cli.json中添加scripts

"scripts": [
    "node_modules/foundation-datepicker/js/foundation-datepicker.js"
]

3.将typings添加到app.component.ts

npm install --save-dev @types/jquery

并将jquery 和foundation-datepicker 插件导入页面

import * as $ from 'jquery';
import 'foundation-datepicker';

4.最后，调用ngOnInit()中的插件app.component.ts

$('#scenario_start_date').fdatepicker(/*...*/);

这给出了错误

fdatepicker 未定义。 所以我将其类型转换为

(<any>$('#scenario_start_date')).fdatepicker(/*...*/);

抑制错误。

这给出了一个新的错误

未捕获的类型错误：无法读取未定义的属性“fn”

在 eval (webpack-internal:///../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
在 eval (webpack-internal:///../../../../foundation-datepicker/js/foundation-datepicker.min.js:1)
在对象.../../../../foundation-datepicker/js/foundation-datepicker.min.js (vendor.bundle.js:36)
在 __ webpack_require __ (inline.bundle.js:55)
在 eval (webpack-internal:///../../../../../src/app/app.component.ts:15)
在对象.../../../../../src/app/app.component.ts (main.bundle.js:21)
在 __ webpack_require __ (inline.bundle.js:55)
在 eval (webpack-internal:///../../../../../src/app/app.module.ts:11)
在对象.../../../../../src/app/app.module.ts (main.bundle.js:29)
在 __ webpack_require __ (inline.bundle.js:55)

我的代码做错了什么？任何指针都会有所帮助。

Answer 1

您的导入语句似乎是错误的。

请尝试import $ from 'jquery';

并确保 jQuery 与您生成的捆绑文件捆绑在一起。

在您的情况下，它要么不是全局导出的，要么不包含在窗口上下文中。

在这种情况下尝试

window.jQuery = $;
window.$ = $;