Question

使用框架

Angular：5.2.3
基金会（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.在styleUrls

app.component.ts

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

2.在scripts

angular-cli.json

"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(/*...*/);

以抑制错误。

这会产生新的错误

未捕获的TypeError：无法读取未定义的属性“fn”
     <\ t> at eval（webpack-internal：///../../../../foundation-datepicker/js/foundation-datepicker.min.js：1）
    在eval（webpack-internal：///../../../../foundation-datepicker/js/foundation-datepicker.min.js：1）
    at Object ... / .. / .. / .. / foundation-datepicker / js / foundation-datepicker.min.js（vendor.bundle.js：36）
    at __ webpack_require __（inline.bundle.js：55）
    在eval（webpack-internal：///../../../../../src/app/app.component.ts:15）
    在对象... / .. / .. / .. / .. / src / app / app.component.ts（main.bundle.js：21）
    at __ webpack_require __（inline.bundle.js：55）
    在eval（webpack-internal：///../../../../../src/app/app.module.ts:11）
    在对象... / .. / .. / .. / .. / src / app / app.module.ts（main.bundle.js：29）
    at __ webpack_require __（inline.bundle.js：55）

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

将jQuery插件添加到角度应用

0 个答案: