ActiveReportsJS Angular 보고서 디자이너
이 페이지에서는 ActiveReportsJS Angular 보고서 디자이너 컴포넌트에 대해 자세히 살펴봅니다. 보고서 디자이너 컴포넌트를 Angular 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.
ActiveReportsJS Angular NPM 패키지
@grapecity/activereports-angular npm 패키지를 통해 ActiveReportsJS Angular 보고서 디자이너를 포함한 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다.
ActiveReportsJS Angular 모듈
ActiveReportsJS Angular 보고서 디자이너는 ActiveReportsModule Angular 모듈에 있으므로, 응용 프로그램의 루트 모듈 또는 보고서 디자이너와 함께 사용하도록 되어 있는 다른 모듈로 가져와야 합니다. 예를 들어 다음과 같습니다.
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ActiveReportsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
ActiveReportsJS Angular 디자이너 컴포넌트
ActiveReportsJS Angular 보고서 디자이너 컴포넌트는 gc-activereports-designer 태그와 통합할 수 있습니다. 다음 입력 속성을 사용할 수 있습니다.
| 속성 | 유형 | 설명 | ||
|---|---|---|---|---|
| hotkeysEnabled | boolean | 저장 및 열기 핫키가 사용하도록 설정되어 있는지 여부를 나타냅니다. | ||
| language | string | 디자이너 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 지역화 페이지를 확인하십시오. | ||
| fontSet | "default" | "registered" | "all" | 사용 가능한 글꼴 집합을 나타냅니다. 자세한 내용은 글꼴 구성을 참조하십시오. |
| dataSources | 데이터 소스 템플릿의 배열 | 미리 정의된 데이터 소스 및 데이터 집합을 설정합니다. | ||
| reportList | 보고서 리소스 정보 항목의 배열 | 하위 보고서의 미리 정의된 보고서 이름을 설정합니다. | ||
| imageList | 이미지 리소스 정보 항목의 배열 | 이미지 보고서 항목의 미리 정의된 이미지를 설정합니다. | ||
| onCreate | onCreate 함수 | 디자이너 도구 모음에 새 보고서 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
| onOpen | onOpen 함수 | 디자이너 도구 모음에 보고서 열기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
| onRender | onRender 함수 | 디자이너 도구 모음에 보고서 미리 보기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
| onSave | onSave 함수 | 디자이너 도구 모음에 보고서 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
| onSaveAs | onSaveAs 함수 | 디자이너 도구 모음에 다른 이름으로 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
| onOpenFileMenu | onOpenFileMenu 함수 | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. | ||
| report | 보고서 개체 | 디자이너에서 지정된 보고서를 로드합니다. |
또한 부모 컴포넌트에서 디자이너 클래스 인스턴스의 getReport, setReport 및 processCommand 메서드를 ViewChild 삽입과 함께 사용할 수 있습니다.
@ViewChild(DesignerComponent, { static: false }) reportDesigner: DesignerComponent;