Использование функции обратного вызова с параметрами между компонентами

Question

Кто-нибудь может сказать мне, как изменить эту часть scheduler.component.ts :

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

и эту часть cal.component.ts :

 this.events = this.getEvents();

, чтобы я мог в функции getEvents () в cal.component.ts , вызвать метод: this.BookingService.getBookings (this.ip, начало, конец ). подписаться (

вместо 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

Спасибо, но проблема может быть в другом месте.Я пытался создать событие, и это выглядело многообещающе с самого начала.В 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>

и в cal.component:

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 в scheduler.component после обратного вызова (this.events) не меняются.Все еще есть результаты ngOnInit ()

Я попытался повторно инициализировать this.events с новым пустым объектом, но затем я получил бесконечный цикл, и записи начинают загружаться и сбрасывать всевремя.Я мог видеть на своей странице, что после смены месяца я получил новые данные, но я не могу остановить этот цикл событий.

Я пробовал и второй подход (через службу), но результат похож.Бесконечный цикл.

Эти два компонента не используют друг друга напрямую.Они связаны в виде HTML.

Answer 2

ну я в этом аду какое-то время пробую разные подходы.Это с 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
                            });
                }

снимок экрана №.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 .

Answer 3

Поскольку функция 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 в BookingService