dhtmlxScheduler是一個(gè)類似于Google日歷的JavaScript日程安排控件，日歷事件通過(guò)Ajax動(dòng)態(tài)加載，支持通過(guò)拖放功能調(diào)整事件日期和時(shí)間，事件可以按天，周，月三個(gè)種視圖顯示。

在本教程中，我們將使用兩個(gè)強(qiáng)大的工具：DHTMLX Scheduler庫(kù)和Angular框架來(lái)創(chuàng)建一個(gè)全面的酒店客房預(yù)訂應(yīng)用程序。在上文中（點(diǎn)擊這里回顧>>）我們?yōu)榇蠹医榻B了一些基礎(chǔ)的準(zhǔn)備工作及如何創(chuàng)建Scheduler組件，本文將繼續(xù)介紹數(shù)據(jù)相關(guān)的問(wèn)題、服務(wù)器配置等。

Step 4 – 提供和保存數(shù)據(jù)

數(shù)據(jù)加載

要在Angular Scheduler中添加數(shù)據(jù)加載，您需要添加reservation和collections服務(wù)。但在此之前，讓我們?yōu)轫?xiàng)目創(chuàng)建并配置一個(gè)環(huán)境文件，執(zhí)行如下命令：

ng generate environments

在src/environments文件夾下新創(chuàng)建的environment.development.ts文件中，我們將添加以下代碼：

export const environment = {
production: false,
apiBaseUrl: '//localhost:3000/data'
};

我們還將為錯(cuò)誤創(chuàng)建一個(gè)助手，當(dāng)出現(xiàn)錯(cuò)誤時(shí)，它將通過(guò)向控制臺(tái)發(fā)送錯(cuò)誤消息來(lái)通知用戶。為此，用以下代碼在app/services.ts文件夾中創(chuàng)建service- helpers文件：

export function HandleError(error: any): Promise<any>{
console.log(error);
return Promise.reject(error);
}

現(xiàn)在讓我們創(chuàng)建預(yù)訂和收集服務(wù)，執(zhí)行如下命令：

ng generate service services/reservation --flat --skip-tests
ng generate service services/collections --flat --skip-tests

在services文件夾中新創(chuàng)建的reservation.service.ts文件中，我們將添加以下代碼：

import { Injectable } from '@angular/core';
import { Reservation } from "../models/reservation";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class ReservationService {
private reservationUrl = `${environment.apiBaseUrl}/reservations`;

constructor(private http: HttpClient) { }

get(): Promise<Reservation[]>{
return firstValueFrom(this.http.get(this.reservationUrl))
.catch(HandleError);
}

insert(reservation: Reservation): Promise<Reservation> {
return firstValueFrom(this.http.post(this.reservationUrl, reservation))
.catch(HandleError);
}

update(reservation: Reservation): Promise<void> {
return firstValueFrom(this.http.put(`${this.reservationUrl}/${reservation.id}`, reservation))
.catch(HandleError);
}

remove(id: number): Promise<void> {
return firstValueFrom(this.http.delete(`${this.reservationUrl}/${id}`))
.catch(HandleError);
}
}

在新創(chuàng)建的collections.service.ts文件中，添加以下代碼行：

import { Injectable } from '@angular/core';
import { Room } from "../models/room.model";
import { RoomType } from "../models/room-type.model";
import { CleaningStatus } from "../models/cleaning-status.model";
import { BookingStatus } from "../models/booking-status.model";
import { HttpClient } from "@angular/common/http";
import { HandleError } from "./service-helper";
import { firstValueFrom } from 'rxjs';
import { environment } from '../../environments/environment.development';

@Injectable()
export class CollectionsService {
private collectionsUrl = `${environment.apiBaseUrl}/collections`;

constructor(private http: HttpClient) { }

getRooms(): Promise<Room[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/rooms`))
.catch(HandleError);
}

updateRoom(room: Room): Promise<void> {
return firstValueFrom(this.http.put(`${this.collectionsUrl}/rooms/${room.id}`, room))
.catch(HandleError);
}

getRoomTypes(): Promise<RoomType[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/roomTypes`))
.catch(HandleError);
}

getCleaningStatuses(): Promise<CleaningStatus[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/cleaningStatuses`))
.catch(HandleError);
}

getBookingStatuses(): Promise<BookingStatus[]>{
return firstValueFrom(this.http.get(`${this.collectionsUrl}/bookingStatuses`))
.catch(HandleError);
}
}

get()、getRooms()、getRoomTypes()、getCleaningStatuses()和getBookingStatuses()方法從服務(wù)器檢索數(shù)據(jù)。

reservationUrl和collectionurl是服務(wù)的私有元素，它們包含REST API的URL。為了發(fā)送HTTP請(qǐng)求，一個(gè)HTTP類被注入到服務(wù)中。

要插入新項(xiàng)，需要向URL發(fā)送POST請(qǐng)求，請(qǐng)求體中包含新項(xiàng)。

要更新項(xiàng)，需要向url/item_id發(fā)送一個(gè)PUT請(qǐng)求。此請(qǐng)求還在其主體中包含更新后的項(xiàng)。

要?jiǎng)h除項(xiàng)，需要向url/item_id發(fā)送刪除請(qǐng)求。

CRUD操作

服務(wù)應(yīng)該處理調(diào)度器中的CRUD操作，通過(guò)在reservations.service.ts和collections.service.ts文件中添加HttpClient模塊，HTTP通信已經(jīng)啟用：

import { HttpClient } from "@angular/common/http";

這一步允許我們?cè)贏ngular應(yīng)用中無(wú)縫地獲取數(shù)據(jù)。

要利用HttpClient模塊，還需要從@angular/common/http包中包含必需的HttpClientModule。在app.module.ts文件中，您應(yīng)該像下面這樣更新imports數(shù)組：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SchedulerComponent } from './scheduler/scheduler.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent,
SchedulerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

HTMLX Scheduler組件應(yīng)該使用ReservationService和CollectionsService來(lái)獲取/插入/更新/刪除預(yù)訂和集合，為了啟用這些選項(xiàng)，向組件添加ReservationService和CollectionsService。首先在scheduler.component.ts中導(dǎo)入服務(wù)所需的模塊：

import { ReservationService } from '../services/reservation.service';
import { CollectionsService } from '../services/collections.service';

您還應(yīng)該將@Component裝飾器中指定EventService作為提供商：

providers: [ ReservationService, CollectionsService ]

現(xiàn)在每次初始化一個(gè)新的SchedulerComponent時(shí)，都會(huì)創(chuàng)建一個(gè)新的服務(wù)實(shí)例。

服務(wù)應(yīng)該準(zhǔn)備好被注入到組件中。為此，將以下構(gòu)造函數(shù)添加到SchedulerComponent類中：

constructor(
private reservationService: ReservationService,
private collectionsService: CollectionsService
) { }

接下來(lái)，我們將添加updateRoom()方法來(lái)在數(shù)據(jù)庫(kù)中保存room清潔狀態(tài)的更改：

handleCleaningStatusChange(target: HTMLSelectElement) {
...
this.collectionsService.updateRoom(roomToUpdate);
}

您需要修改ngOnInit函數(shù)來(lái)調(diào)用服務(wù)獲取該函數(shù)，然后等待響應(yīng)來(lái)將數(shù)據(jù)放入調(diào)度器。

scheduler.init(this.schedulerContainer.nativeElement, new Date(), 'timeline');

const dp = scheduler.createDataProcessor({
event: {
create: (data: Reservation) => this.reservationService.insert(data),
update: (data: Reservation) => this.reservationService.update(data),
delete: (id: number) => this.reservationService.remove(id),
}
});

forkJoin({
reservations: this.reservationService.get(),
rooms: this.collectionsService.getRooms(),
roomTypes: this.collectionsService.getRoomTypes(),
cleaningStatuses: this.collectionsService.getCleaningStatuses(),
bookingStatuses: this.collectionsService.getBookingStatuses()
}).subscribe({
next: ({ reservations, rooms, roomTypes, cleaningStatuses, bookingStatuses }) => {
const data = {
events: reservations,
collections: {
rooms,
roomTypes,
cleaningStatuses,
bookingStatuses,
}
};

scheduler.parse(data);
},
error: error => {
console.error('An error occurred:', error);
}
});

scheduler.parse接受JSON格式的數(shù)據(jù)對(duì)象，為了有效地等待多個(gè)異步請(qǐng)求的完成并將它們的數(shù)據(jù)(保留和集合)加載到調(diào)度器中，可以利用RxJS庫(kù)中的forkJoin操作符。請(qǐng)包括導(dǎo)入：

import { forkJoin } from 'rxjs';

你可以在的完整代碼。