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

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(( 中调用方法：这。BookingService.getBookings(this.ip，start， end(.subscribe(

而不是这。BookingService.getBookings(this.ip(.subscribe(

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

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

下面我只放了应用程序的重要部分：

计算组件.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之间的关系是什么(也许是父子关系？(，但它们要么需要使用 EventEmitter 相互通信，要么将getEvents函数导出到服务中并在您想要的任何位置调用它。

服务解决方案示例：

In 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;
}
}

不要忘记处理start和endundefined值BookingService

Answer 2

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

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 中我可以看到新值

• this.events in scheduler.component 中的值在回调(this.events(之后不会更改。仍然有来自 ngOnInit(( 的结果

我尝试使用新的空对象重新初始化this.events，但后来我得到了无限循环，记录开始加载和重置。我可以在我的页面上看到，经过一个月的变化，我得到了新数据，但我无法停止这个事件循环。

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

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

Answer 3

好吧，我在这个地狱里呆了一段时间，并尝试了不同的方法。这是可观察的，但它没有太大变化。

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
});
}

截图1

这有效，但仅在 cal.component 初始化期间加载数据。以后无法重新加载它们。

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

截图2

正如你所看到的变量this.events有Array(12([MyEvenc,...]和evnt Array(0([]，但两者都有相同的值。不同的是，当我使用回调(this.events(时，我可以在日历中看到结果，而不是当我使用回调(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: '.

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