在角部件2个fullcalender实例导致的jquery未找到错误(2 fullcalender

2019-10-29 06:19发布

我加入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我与不像回购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)

感谢有这方面的信息。

UPDATE1

正如评论所说我在index.html的更新从cdnjs进口和添加moment.js的顺序。 我不再有关于“jQuery的没有定义”第2个错误在我的岗位。

现在,当我点击CAL事件它显示相同的“模式是不是功能可按错误”,并没有模态....但是当我从debuger调用模式()函数的模式显示了我的内容。 calender.component.ts 83行是该线

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

Answer 1:

面对引导类似的问题和jQuery在过去的Angular2。 不幸的是引导需要jQuery来声明全局。 点击以下链接可以帮助: -

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



文章来源: 2 fullcalender instances in Angular component causes jquery not found error