Angular 组件中的 2 个 fullcalender 实例导致 jquery not found 错误

Question

我在一个组件中添加了 2 个 fullCalenders (https://fullcalendar.io/)（具有不同的视图），我收到 jquery 错误。

即使我将压延机分成两个不同的组件并像这样添加到第三个组件，我也会收到此错误。

<div>
  <app-day-calender></app-day-calender>
  <app-calender></app-calender>
</div>

如果我有一个只有一个日历的组件，一切正常（没有错误并且引导模式工作）。这让我相信问题在于 jquery 为每个日历或 smtn 加载了两次，我不知道如何整理这些东西。

这是我的组件导入的样子。

import {
  OnInit,
  Component,
  Input,
  Output,
  ElementRef,
  EventEmitter,
  AfterViewInit,
} from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';
import { Options } from "fullcalendar";

当我单击日历上的一个事件时，我收到了错误消息。在日历选项中，我设置了 eventClick 以打开引导模式。这是该部分的外观。

eventClick: function (event, jsEvent, view) {
  var stime = '';
  var etime = '';
  if (event.start) {
    stime = event.start.format('MM/DD/YYYY, h:mm a');
  }

  if (event.end) {
    etime = event.end.format('MM/DD/YYYY, h:mm a');
  }

  $('.titleSection').append('<h5>' + event.title + '</h5>');

  $('.modal-body').append('<b>Starts : </b>' + stime);
  $('.modal-body').append('<br/><b>Ends : </b>' + etime);


  $('#myModal').modal();

  return false;
},

这是我在 index.html 中导入的脚本

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>

这是我为进行此项目测试而克隆的 github ripo。 https://github.com/nekken/ng2-fullcalendar 与 repo 不同，我正在使用 angular4。

这是我点击事件时遇到的错误。

fullcalendar.js:15 Uncaught ReferenceError: jQuery is not defined
    at fullcalendar.js:15
    at fullcalendar.js:17
(anonymous) @ fullcalendar.js:15
(anonymous) @ fullcalendar.js:17



vendor.bundle.js:104209 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).modal is not a function
    at HTMLAnchorElement.eventClick (main.bundle.js:505)
    at constructor.publiclyTrigger (vendor.bundle.js:12330)
    at members.constructor.publiclyTrigger (vendor.bundle.js:10290)
    at members.constructor.handleSegClick (vendor.bundle.js:6263)
    at HTMLAnchorElement.<anonymous> (vendor.bundle.js:6256)
    at HTMLDivElement.dispatch (vendor.bundle.js:22357)
    at HTMLDivElement.elemData.handle (vendor.bundle.js:22165)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2838)
    at Object.onInvokeTask (vendor.bundle.js:107070)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2837)

感谢您提供这方面的任何信息。

更新1

正如评论中所建议的，我更新了导入顺序，并在我的 index.html 中添加了来自 cdnjs 的 moment.js。我的帖子中不再有关于“未定义 jQuery”的前 2 个错误。

现在，当我单击 cal 事件时，它显示相同的“模态不是功能错误”并且没有模态......但是当我从调试器调用 modal() 函数时，模态会显示我的内容。 calender.component.ts 第83行就是这一行

  $('#myModal').modal();

Answer 1

过去在使用 Angular2 时遇到过与 Bootstrap 和 jquery 类似的问题。不幸的是，引导程序需要将 jquery 声明为全局的。以下链接可能会有所帮助：-

https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2#jQueryandPlugins