时间戳

首页 > 解决方案 > $(...).thirdPartyPlugins 不是函数 - 打字稿

jquery - $(...).thirdPartyPlugins 不是函数 - 打字稿

问题描述

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

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

插件很糟糕，因为它没有找到 jQuery 和 moment 所以我将它们添加到我的 .angular-cli.js

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

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

interface JQuery {
   bootstapMaterialDatePicker() : JQuery;
}

和

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

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

感谢关注

标签： jqueryangulartypescriptjquery-plugins

解决方案

看到您正在使用 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';

推荐阅读