트랜잭션 서비스 클래스 계층

Transaction, State, Transaction Log

트랜잭션은 트랜잭션 서비스의 주요 구성 요소입니다. 트랜잭션은 실제로 데이터에 대해 실행하는 모든 연산을 의미합니다. 인터페이스는Transaction 세 가지 속성을 정의합니다:idnewValue 그리고type

트랜잭션의 는id 데이터 레코드마다 고유해야 하며, 이 트랜잭션이 영향을 미치는 레코드를 정의합니다.type이 세 가지 거래 유형 중 하나일 수 있으며, 실행하는 연산에 따라 다릅니다.ADDDELETEUPDATE 트랜잭션newValue을 추가할ADD 경우를 대비해 새 레코드의 값을 포함합니다. 기존 기록을 업데이트하는 경우, 변경newValue 사항만 포함하게 됩니다. 같은 ID로 여러 종류의 거래가UPDATE 있을 수 있습니다. 레코드를 삭제할 경우, 삭제newValue 된 레코드의 값을 포함합니다.

트랜잭션 서비스 사용 방법 항목에서 각 트랜잭션 유형을 추가하는 방법에 대한 예를 볼 수 있습니다.

트랜잭션을 추가할 때마다 트랜잭션 로그에 추가되고 실행 스택을 되돌립니다. 트랜잭션 로그의 모든 변경 사항은 레코드별로 누적됩니다. 그 시점부터 서비스는 집계State 된 데이터를 유지합니다. 이 레코드State는 고유 레코드로 구성되며, 모든 레코드는 위에서 언급한 지원 트랜잭션 유형 중 하나일 수 있습니다.

거래를 추가할 때 호출하여 보류 중인 거래를 켤 수 있습니다startPending. 이후 모든 거래는 호출할 때까지 단일 거래로 누적됩니다endPending. 합격하면true 받는 사람endPending 누적된 모든 트랜잭션은 트랜잭션 로그와 실행 취소 스택에 단일 트랜잭션으로 추가됩니다.

Using igxBaseTransaction

우리 그리드 모듈은 트랜잭션 서비스(igxBaseTransactionService)의 매우 기본적인 구현을 제공하며, 대기 중인 세션 기능만을 통해 행 편집 기능을 지원합니다. 와startPending를 사용하면endPending 행 편집을 여러 셀당 작업을 하나의 변경으로 결합할 수 있습니다. 즉, 한 레코드의 여러 셀을 편집하면 하나의 트랜잭션이 생성되고, 행 편집 이벤트만 처리할 수 있습니다.

누적된 상태가 부분 개체이므로 서비스를 사용하여 어떤 셀이 편집되었는지 확인하고 해당 셀을 중심으로 UI를 구축할 수도 있습니다.

igxBaseTransactionService실행 취소 스택이 없어서 실행 취소/재실행 기능을 제공하지 않습니다.

행 편집을 활성화하는 방법에 대한 자세한 예igxBaseTransactionService 시는 다음 주제들에 제공됩니다:

General information on igxTransactionService and igxHierarchicalTransactionService

igxTransactionService그리고igxHierarchicalTransactionService 인터페이스를 구현Transaction Service 하는 주입 가능한 미들웨어입니다. 구성 요소는 이를 이용해 기본 데이터에 영향을 주지 않고 변경 사항을 누적할 수 있습니다. 제공자는 API를 노출하여 데이터에 접근, 조작 (실행 취소, 재실행 및 실행 및 폐기) 또는 커밋 변경 사항 하나 또는 모든 변경사항을 수행합니다.

좀 더 구체적인 예로,igxTransactionServiceigxHierarchicalTransactionService 셀 편집과 행 편집IgxGrid 모두에서 작동할 수 있습니다. 셀 편집 트랜잭션은 셀이 편집 모드를 종료할 때 추가됩니다. 행 편집이 시작되면 그리드는 호출startPending 하여 트랜잭션 서비스를 대기 상태로 설정합니다. 편집된 각 셀은 대기 중인 거래 로그에 추가되며 메인 거래 로그에는 추가되지 않습니다. 행이 편집 모드를 종료하면 모든 변경 사항이 메인 트랜잭션 로그와 실행 취소 로그에 하나의 트랜잭션으로 추가됩니다.

두 경우 모두(셀 편집 및 행 편집) 그리드 편집 상태는 업데이트, 추가 및 삭제된 모든 행과 마지막 상태로 구성됩니다. 나중에 한 번에 또는 ID별로 검사, 조작 및 제출할 수 있습니다. 변경 사항은 편집 모드에 따라 개별 셀이나 행에 대해 수집되고 데이터 행/레코드별로 누적됩니다.

Using igxTransactionService

igxTransactionService확장됩니다igxBaseTransactionService.

컴포넌트가 데이터 연산을 할 때 트랜잭션을 사용하려면,igxTransactionService 구성 요소의 공급자로서providers 배열.

이 카드는igxTransactionService 실행 취소 스택을 제공하므로 되돌리기/재실행 기능을 활용할 수 있습니다. 실행 취소 스택은 실제로 트랜잭션 배열을 포함하는 배열입니다. 을 사용할igxTransactionService 때는 Undo 스택에 트랜잭션이 있는지 확인하기 위해 accessor를canUndo 확인할 수 있습니다. 만약 있다면, 이 메서드를undo 사용해 마지막 거래를 삭제하고redo 마지막으로 취소된 거래를 적용할 수 있습니다.

다음 주제에서 일괄 편집 기능을 갖춘 igxGrid가 구현되는 방법에 대한 자세한 예를 찾을 수 있습니다.

그리드 일괄 편집

Using igxHierarchicalTransactionService

igxHierarchicalTransactionService확장됩니다igxTransactionService.

이 데이터는igxHierarchicalTransactionService 부모와 자식 간의 관계를 처리하도록 설계되었습니다(예를 들어 계층적 데이터 구조igxTreeGrid가 있을 때 이 기능을 사용하세요). 이 서비스는 거래를 추가할ADD 때 예상하는 위치에 새 기록이 추가되도록 보장합니다. 부모 레코드를 삭제하면, 그 자식들은 구현 방식에 따라 상위 계층 구조로 승격되거나 부모 레코드와 함께 삭제됩니다. 트리 그리드의 특성을 구체적으로 볼cascadeOnDelete 수 있는데, 값에 따라 부모 레코드를 삭제하면 자식에 미치는 영향이 다릅니다.

애플리케이션에서 사용자가 이미 삭제되어 트랜잭션이 커밋되기를 기다리고 있는 상위 레코드에 하위 레코드를 추가하려고 시도하는 시나리오를 처리할 수 있습니다. Transaction Service에서는 삭제될 상위 레코드에 레코드를 추가하는 것을 허용하지 않으며 콘솔에 오류 메시지가 표시됩니다. 그러나 다음 코드를 사용하여 상위 요소가 삭제되는지 확인하고 사용자에게 경고를 구현할 수 있습니다.

    const state = this.transactions.getState(parentRecordID);
    if (state && state.type === TransactionType.DELETE) {
        // Implement your logic here
    }

배치 편집이 어떻게 구현되는지,igxTreeGrid 그리고 배치 편집이 어떻게igxHierarchicalGrid 구현되는지에 대한 자세한 예시는 다음 주제들에서 확인할 수 있습니다:

Transaction Factory

Ignite UI for Angular 그리드 내 거래를 구체적으로 구현할 때, 그리드의 가치에 따라 적절한 트랜잭션 서비스를 인스턴스화하기 위해 팩토리가 사용됩니다batchEditing. 두 개의 별도 거래 공장이 있습니다 -IgxFlatTransactionFactory(Grid그리고Hierarchical Grid)IgxHierarchicalTransactionFactory (트리 그리드). 두 클래스 모두 단 하나의 메서드만 노출합니다 -create- 고유의 새로운 인스턴스를 반환한다 유형. 매개변수가 전달되었습니다 (TRANSACTION_TYPE) 내부적으로 사용됩니다 -None는 다음과 같이 사용됩니다.batchEditing 이야. 거짓 그리고Base- 배치 편집이 활성화된 경우. Anenum (대신)true-false플래그), 확장할 수 있게 해줍니다.

Using Transaction Factory

둘 다IgxFlatTransactionFactory 그리고IgxHierarchicalTransactionFactory 제공됨은root 그리고 공개 API에 노출되어 있습니다. 임의의 체크에 따라 트랜잭션 팩토리를 사용할 수 있습니다.

아래 예시에서는 임의의 (hasUndo) 플래그에 따라 서로 다른 트랜잭션 서비스를 인스턴스화하는 방법을 볼 수 있습니다:

import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from 'igniteui-angular/core';
// import { IgxFlatTransactionFactory, TRANSACTION_TYPE } from '@infragistics/igniteui-angular'; for licensed package

export class MyCustomComponent {
    ...
    constructor(private transactionFactory: IgxFlatTransactionFactory) {}
    ...
    public transaction!: IgxTransactionService<Transaction, State>;

    public set hasUndo(val: boolean) {
        if (val) {
            this.transactions = this.transactionFactory.create(TRANSACTION_TYPE.Base);
        } else {
            this.transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
        }
    }
}

두 factory 클래스 모두 DI 계층에서 배열을 사용providers 해 확장 및 덮어쓸 수 있어, 자신만의 맞춤형 구현을 제공할 수 있습니다. 여기에 팩토리에서 인스턴스화되는 모든 클래스도 공개되어 있어, 내부적으로 트랜잭션 구현을 사용하는 컴포넌트에 제공하는 것에 대해 많은 제어권을 제공합니다.

예를 들어, 내부에서IgxGridComponent 사용하는 트랜잭션 서비스를 덮어쓰려면 다음과 같은 방법이 있습니다:

먼저 사용자 정의 팩토리 클래스를 정의합니다.

import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
TransactionService, Transaction, State } from 'igniteui-angular/core';
// import { IgxFlatTransactionFactory, TRANSACTION_TYPE, IgxBaseTransactionService,
// TransactionService, Transaction, State } from '@infragistics/igniteui-angular'; for licensed package

class CustomTransactionService extends IgxBaseTransactionService {
    ...
}

export class CustomTransactionFactory extends IgxFlatTransactionFactory {
    ...
    create(type: TRANSACTION_TYPE): TransactionService<Transaction, State> {
        if (type === TRANSACTION_TYPE.Base) {
            return new CustomTransactionService();
        }
        super.create(type);
    }
}

그 다음, 컴포넌providers 트 배열에서 (using byIgxFlatTransactionFactory)를 사용자 지정 구현으로 덮어쓰igx-grid 세요.

import { IgxFlatTransactionFactory } from 'igniteui-angular/core';
// import { IgxFlatTransactionFactory } from '@infragistics/igniteui-angular'; for licensed package
import { CustomTransactionFactory } from '../custom-factory.ts';

@Component({
    selector: 'app-grid-view',
    template: `<igx-grid [batchEditing]="true" [data]="data" [autoGenerate]="true"></igx-grid>`,
    providers: [{ provide: IgxFlatTransactionFactory, useClass: CustomTransactionFactory }]
})

export class GridViewComponent {
    ...
}

이제 가 로batchEditing 설정되면true 그리드는 인스턴스CustomTransactionService를 받게 됩니다.