我加入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();