如何在角度 2 中使用带有 fullCalendar 的服务？答案

【问题标题】：How to use services with fullCalendar in angular 2?如何在角度 2 中使用带有 fullCalendar 的服务？
【发布时间】：2017-04-15 06:02:39
【问题描述】：

我是 Angular 2 初学者。我在 angular-2 中使用 fullcalendar 创建了日历。首先，我在 calendarOptions 中创建了事件，并且效果很好。但是我尝试使用 fullcalendar 进行服务，但它不起作用。因为我不知道如何使用带有 fullcalendar 的服务。

event.json

    {
    "data": [
        {
            "title": "All Day Event",
            "start": "2017-04-01"
        },
        {
            "title": "Long Event",
            "start": "2017-04-07",
            "end": "2017-04-10"
        }
    ]
}

events.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http , Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EventsService {

  data: object;
  constructor(private http: Http) { }
  getEvents()
  {
    return this.http.get("src/assets/data/events.json").map( response => response.json().data);
  }
}

full-calendar.component.ts

import { Component, OnInit } from '@angular/core';
import { EventsService } from './events.service';

@Component({
  selector: 'app-full-calendar',
  templateUrl: './full-calendar.component.html',
  styleUrls: ['./full-calendar.component.css']
})
export class FullCalendarComponent implements OnInit {

  events: object;
  constructor(private eventsService: EventsService){}

  ngOnInit(){
    this.events = this.eventsService.getEvents().subscribe(events => {this.events = events;});
    console.log(this.events);
  }

  calendarOptions:Object = {
    height: 'auto',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay, prevYear,nextYear'
    },
    editable: true,
    eventLimit: true,
    events: this.events,
    eventClick: function(event, jsEvent, view) {

        alert('Event: ' + event.title + '  ' + 'Start Date: ' + event.start);
        $(this).css('border-color', 'red');
    },
    dayClick: function(date, jsEvent, view) {

        alert('Clicked on: ' + date.format());
        $(this).css('background-color', 'red');

    }
  };
}

请告诉我们。如何使用全日历服务？

【问题讨论】：

标签： angular2-services

【解决方案1】：

是的服务在 fullcalendar angular-2 中使用

full-calendar.component.ts

events: object;

  constructor(private eventsService: EventsService){}

  ngOnInit(){
    this.eventsService.getEvents().subscribe(events => {this.events = Events;},
                                             err => alert(err),
                                             () => console.log(this.events));
  }

  calendarOptions(){
     let calendarOptions:Object = {
        height: 'auto',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay, prevYear,nextYear'
        },
        editable: true,
        eventLimit: true,
        events: this.events,
        eventClick: function(event, jsEvent, view) {
            alert('Event: ' + event.title + '  ' + 'Start Date: ' + event.start);
        },
        dayClick: function(date, jsEvent, view) {
            alert('Clicked on: ' + date.format());
        }
    };
    return(calendarOptions);
  }

编辑您的 html 文件：-

<angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar>

效果很好。

【讨论】：

什么是 {{options |标签之间的json}}