在ngAfterViewInit之后更新angular2

本文介绍了在ngAfterViewInit之后更新angular2-fullcalendar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

好的，这是新事物，在与angular2-fullcalendar相关的任何线程中我都没有得到答案.

Alright, this is something new and I haven't got it answered in any threads related to angular2-fullcalendar.

我能够汇编 angular2-fullcalendar 本文档中所说的内容和所写内容

I am able to compile what is said and written on this documentation of angular2-fullcalendar

初始化视图后，尝试用事件填充日历时会出现问题.

Problem occurs when i am trying to populate calendar with my events, after the view has been initialised.

方案1:

查看负载

显示日历

显示事件(硬编码)

方案2:

查看负载

显示日历

从服务器获取记录

要求angular2-fullcalender更新我的视图.

没有错误，也不显示事件.

HTML:

<angular2-fullcalendar [options]="some" id="mycal" #mycal></angular2-fullcalendar>

工作示例:场景1

event: any[] = [{ title: 'Long Event', start: '2017-02-21', end: '2017-02-22' },{ title: 'Long Event', start: '2017-02-16T16:00:00', end: '2017-02-17' }]; calOptions: Options = {}; ngOnInit() { this.some.events = this.event; }

不起作用的示例:场景2

Not working example: Scenario 2

event: any[] = [{ title: 'Long Event', start: '2017-02-21', end: '2017-02-22' },{ title: 'Long Event', start: '2017-02-16T16:00:00', end: '2017-02-17' }]; ngOnInit() { this.getBookings(); } getBookings() { this._service.getEvents().subscribe(values => { this.updateCalendar(); }, () => console.log('error')) updateCalendar() { this.calOptions.events = this.event; //$(this.element.nativeElement).fullCalendar('updateEvents',this.event) //I tried doing the query way too, but it failed. }

推荐答案

1:NPM安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

'moment': 'npm:moment', 'jquery':'npm:jquery/dist/jquery.js', 'fullcalendar':'npm:fullcalendar/dist/fullcalendar.js'

我已附上以下文件，仅供参考.

I have attached the file below for reference purpose only.

import { CalendarComponent } from './angular2-fullcalendar/src/calendar/calendar';

将CalendarComponent添加到声明数组.

@NgModule({ imports: [...], declarations: [ CalendarComponent ], providers: [...], bootstrap: [...] })

5现在该显示日历了.选择您自己的组件.例如，我将使用bookingponent.html

<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal></angular2-fullcalendar>

在bookingponent.ts

import { Options } from 'fullcalendar' import * as $ from 'jquery'; import * as moment from "moment

导入这三件事，现在您会看到我们之前所做的systemjs.config.js的重要性. 继续与课程中的bookingponent.ts

Import the 3 things, now u see the importance the systemjs.config.js that we did earlier. Contniue with bookingponent.ts in the class,

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;

从第5步开始，html中有#mycal，即上述声明中的'mycal'.

From the step 5 beginning, there is #mycal in the html, that is 'mycal' in the above statment.

calOptions: any = {};

将calOptions初始化为空，请记住不要为空.

Initialising the calOptions to be empty, remember not null.

Contructor() { var events = [ { title: 'All Day Event', start: '2016-09-01' }, { title: 'Long Event', start: '2016-09-07', end: '2016-09-10' }]; this.UpdateCalendar(events); } UpdateCalendar(events) { this.calOptions.events = events $(this.myCal.nativeElement).fullCalendar('addEventSource', events) }

在上面的构造函数中，我们要显示一些事件，我们正在调用updateCalendar来更新事件.

In the above, in constructor we have some events to be displayed, we are calling updateCalendar to update the events.

对此的更多参考: gist.github/shah- smit/85aff341cd4a20494910ab2c17e82777/edit