Question

有人可以告诉我如何更改 scheduler.component.ts 的这一部分：

events: (start: any, end: any, timezone: any, callback: any) => {
                    callback(this.events);
                }

和 cal.component.ts 的这一部分：

 this.events = this.getEvents();

因此我可以在 cal.component.ts 中的getEvents（）函数中调用方法： this.BookingService.getBookings（this.ip，开始，结束）。subscribe（

而不是 this.BookingService.getBookings（this.ip）.subscribe（

下面的所有代码现在都可以正常工作

但是，如果日历显示的是从开始日期到结束日期的范围，我不想加载所有预订。参数start和end在scheduler.component.ts中正确设置。

下面，我仅放置应用程序的重要部分：

cal.component.html

  <div>
    <ds3-schedule (onEventClick)="handleEventClick($event)" (onEventResize)="resizeEvent($event)" (onEventDragStop)="saveEvent($event)"
      (onDayClick)="showDialog($event)" editable="true" defaultView="timelineMonth" [header]="header" [resourceColumns]="resourceColumns"
      [resources]="resources" [(events)]="events" [defaultDate]="defaultDate" [aspectRatio]="1.2" [resourceAreaWidth]="85"
      titleFormat="YYYY-MM-DD dddd" [contentHeight]=330 nowIndicator="true" scrollTime="00:00" locale="pl"
      (onViewRender)="onViewRender($event)" (onEventLoading)="loadingEvents($event)">
    </ds3-schedule>
  </div>

scheduler.component.ts


@Component({
    selector: 'ds3-schedule',
    styles: ['./cal.component.css'],
    template: '<div [attr.style]="style" [attr.class]="styleClass"></div>'
})

export class SchedulerComponent implements AfterViewInit, OnDestroy, DoCheck {

    @Input() events: any[];

ngAfterViewInit() {
         this.schedule = jQuery(this.el.nativeElement);

        if (this.schedule.fullCalendar) {
            this.schedule.fullCalendar({

events: (start: any, end: any, timezone: any, callback: any) => {
                    callback(this.events);
                }

}

cal.component.ts

@Component({
  selector: 'ds-schedule',
  styles: ['./cal.component.css'],
  templateUrl: './cal.component.html',
  //changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    CustomerService,
    CalService,
    BookingService
  ]
})

ngOnInit() {
       this.optionConfig = {}
       this.header = {
         left: 'prev,next today',
         center: 'title',
         right: 'timelineMonth, timelineYear'
       };

       this.events = this.getEvents();
       this.resources = this.getResources();
}

getEvents(): MyEvent[] {
    var events: MyEvent[] = [];
    this.ipservice.getIP().subscribe(
      d => {
        this.ip = d;
        this.BookingService.getBookings(this.ip).subscribe(
          data => {
            this.bookings = data;
            this.bookings.forEach(booking => {
              events.push(this.bookingToEvent(booking));
            });
          }
        )
      }
    );
    return events;
}

Answer 1

由于在用户单击上一个/下一个或切换视图时触发了events函数，因此您将需要通过发送带有开始/结束过滤器的请求来重新获取事件，或者如果后端没有支持它，您将不得不在客户端上实现它。

我不确定CalComponent和SchedulerComponent之间是什么关系（也许是子关系的父母？），但是他们要么需要使用EventEmitters相互通信，要么需要导出将getEvents函数转换为服务，然后在任意位置调用它。

服务解决方案示例：

在scheduler.component.ts

events: (start: any, end: any, timezone: any, callback: any) => {
  this.myService.getEvents(start, end);
  callback(this.events);
}

在my.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService{

  constructor() { }

  getEvents(start?: number, end?: number){
    var events: MyEvent[] = [];
    this.ipservice.getIP().subscribe(
    d => {
      this.ip = d;
      this.BookingService.getBookings(this.ip, start, end).subscribe(
        data => {
          this.bookings = data;
          this.bookings.forEach(booking => {
            events.push(this.bookingToEvent(booking));
          });
        }
      )
    });
    return events;
  }
}

不要忘记处理undefined中start和end的{{1}}值

Answer 2

谢谢，但问题可能出在其他地方。我试图发出事件，一开始看起来很有希望。在scheduler.component中，我添加了：

events: (start: any, end: any, timezone: any, callback: any) => {
                        this.onCallendarChange.emit( {start, end});
                        callback(this.events);
                }

然后在我的html视图中添加（onCallendarChange）：

<ds3-schedule (onEventClick)="handleEventClick($event)" (onEventResize)="resizeEvent($event)" (onEventDragStop)="saveEvent($event)"
      (onDayClick)="showDialog($event)" editable="true" defaultView="timelineMonth" [header]="header" [resourceColumns]="resourceColumns"
      [resources]="resources" [(events)]="events" [defaultDate]="defaultDate" [aspectRatio]="1.2" [resourceAreaWidth]="85"
      titleFormat="YYYY-MM-DD dddd" [contentHeight]=330 nowIndicator="true" scrollTime="00:00" locale="pl"
      (onViewRender)="onViewRender($event)" (onEventLoading)="loadingEvents($event)" (onCallendarChange)="onCallendarChange($event)">
    </ds3-schedule>

和校准组件中的

ngOnInit() {
       this.events = this.getEvents(moment().date(1),moment().date(31));
}

onCallendarChange(event: any): void{
    this.start = event.start;
    this.end = event.end;
    this.events = this.getEvents(this.start,this.end);
  }

效果如下：

页面加载后，我有当月的记录
在月份更改事件发出后，在cal.component中我可以看到新值
值不变。仍有ngOnInit（）

我尝试使用新的空对象重新初始化 this.events ，但随后出现无限循环，并且记录始终开始加载和重置。我可以在页面上看到，当月更改后，我得到了新数据，但是我无法停止这种事件循环。

我也尝试了第二种方法（通过服务），但是结果相似。无限循环。

这两个组件不能直接使用。它们通过html视图连接。

Answer 3

好吧，我在地狱里呆了一段时间，尝试其他方法。这是Observable的功能，但变化不大。

scheduler.component.ts

events: (start: any, end: any, timezone: any, callback: any) => {
                            this.getEvents(start,end).subscribe( evnt =>{
                                console.log(evnt);       <---- screenshot no. 1
                                //this.events = evnt;    <---- this makes endless loop
                                callback(evnt);          <---- this don't change value in calendar
                            });
                }

screenshot no. 1

这有效，但仅在校准组件初始化期间加载数据。以后无法重新加载。

events: (start: any, end: any, timezone: any, callback: any) => {
                            console.log(this.events);       <---- screenshot no. 2
                            callback(this.events);

screenshot no. 2

如您所见，变量 this.events 具有Array（12）[MyEvenc，...]和evnt Array（0）[]，但内部都有相同的值。区别在于，当我使用callback（this.events）时，我可以在日历中看到结果，而不是使用callback（evnt）

这是无尽的循环：

events: (start: any, end: any, timezone: any, callback: any) => {
                            this.getEvents(start,end).subscribe( evnt =>{
                                this.events = evnt;    <---- this makes endless loop
                            });
                }


Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'events: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'. Current value: 'events: '.

似乎事件：（开始：任何，结束：任何，时区：任何，回调：任何）=> {...是我唯一能获得 start 和结束，但这不是我可以更改 this.events 的值的地方。

在组件之间使用带有参数的回调函数

下面的所有代码现在都可以正常工作

3 个答案:

scheduler.component.ts