Question

我刚刚遵循了这个guide，以便在我的Angular 5项目中安装bootstrap-material-datetimepicker，但是只需像这样导入jQuery和bootstrap-material-datetimepicker：

import * as $ from 'jquery';
import 'bootstrap-material-datetimepicker';

这些插件之所以令人沮丧，是因为它没有找到jQuery，因此我将它们添加到了我的.angular-cli.js

中。

现在错误是：调用ERROR TypeError: $(...).bootstrapMaterialDatePicker is not a function时出现$('#date').bootstrapMaterialDatePicker ();

我还尝试在types.d.ts中添加一个接口：

interface JQuery {
   bootstapMaterialDatePicker() : JQuery;
}

和

constructor() {
           $(document).ready(() => {
             console.log($.isFunction($.fn.bootstrapMaterialDatePicker));
      });

（也没有$（dcument）.ready并且在ngOnInit中而是构造函数）返回我 false ，但是如果我在chrome控制台中运行$.isFunction($.fn.bootstrapMaterialDatePicker)，则会返回 true

感谢您的关注

Answer 1

看到您正在使用angular / cli时，它应该像下面这样简单：

在您的.angular-cli文件中，添加对JQuery的引用和bootstrap-material-datetimepicker：

"scripts": [
    ...
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"
    ...
]

请确保先执行的jQuery！如果您使用的是与我不同的版本，则可能必须更新路径以匹配您自己的设置，上。

然后，转到您要在其中使用的组件并添加以下内容：

declare var $: any;

然后正常使用它：

$('#date').bootstrapMaterialDatePicker();

请注意，使用cli不需要手动导入：

import * as $ from 'jquery';
import 'bootstrap-material-datetimepicker';

$（...）。thirdPartyPlugins不是函数-打字稿

1 个答案: