fullcalendar&Angular 5

(新编辑)

我用FullCalendar @Alpha Release实现了Angluar 5.

我之前遇到过将FullCalendar实现为Angular的问题.我以为你们可能也想要更新.

如何正确实现Angular 5的fullcalendar而没有任何错误?我正在尝试将其实现为特定组件.我安装了以下软件包

> jquery
>时刻
> fullcalendar
> fullcalendar-scheduler

仅供参考,以下帖子是我找到解决方案的最接近的帖子.我按照说明操作,但我仍然得到’JQueryPromise’错误.请告知&提前致谢!

Callback angular function from jquery event

package.json

"fullcalendar": "^3.8.0","fullcalendar-scheduler": "^1.9.1","jquery": "^3.2.1","moment": "^2.20.1",

.angular-cli.json

"styles": [
    "styles.css","../node_modules/fullcalendar/dist/fullcalendar.min.css","../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
  ],"scripts": [
    "../node_modules/jquery/dist/jquery.min.js","../node_modules/moment/min/moment.min.js","../node_modules/fullcalendar/dist/fullcalendar.min.js","../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

main.ts

import * as jQuery from "jquery";
(window as any).$= (window as any).jQuery = jQuery;

app.component.html

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

我顺着所有的步骤,但我仍然得到错误.具有讽刺意味的是,它可以在刷新页面时加载,我可以解决错误,但它仍然存在,特别是当我第一次运行’ng serve’时

ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(695,36): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(696,29): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(697,20): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(759,22): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(775,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(988,23): error TS2304: Cannot find name 'JQueryEventObject'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1401,70): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1603,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1623,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(2588,50): error TS2304: Cannot find name 'JQueryPromise'.

New development down this rabbit hole

刚尝试创建一个新组件“schedule.component”并将所有内容移动到那里,但现在我收到以下错误

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set,so 'default-src' is used as a fallback.
由于您提出的GitHub问题,您现在遇到的问题已得到解决.

我相信运行npm install –save-dev @ types / jquery会正确解决这个问题,因为我遇到了同样的问题,运行这个就行了(在我发现这篇文章和GitHub问题的链接之后).

引用GitHub上的修复:“现在在文档中占了这个:https://fullcalendar.io/docs/typescript/

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...