5.20202.699
5.20202.699

Angular에서 Wijmo 사용하기

Angular 10 용 Wijmo 컴포넌트 (Wijmo는 Angular 2 이상에서 작동)를 사용하면 Angular 템플릿 마크업에서 Wijmo 컨트롤(Control) 을 사용할 수 있습니다. TypeScript 클래스 상속 특성의 관점에서, Wijmo Angular 10 컴포넌트 는 이들이 나타내는 컨트롤(Control) 클래스를 "확장"합니다. 즉, Wijmo 컴포넌트에 대한 참조를 얻을 때 참조된 인스턴스는 모든 속성, 이벤트 및 메서드 및 Angular 10 컨포넌트가 포함된 Wijmo 컨트롤 입니다.동시에, Wijmo 컴포넌트는 control 클래스를 확장하고 완전한 기능의 단방향 및 양방향 속성 바인딩 및 이벤트 바인딩과 함께 Angular 10 템플리트 마크업에서 컨트롤를 사용할 수 있도록 필요한 기능을 추가합니다. Wijmo 컨트롤, Wijmo Angular 10 구성 요소 및 Angular 10 자체가 동일한 TypeScript 언어로 작성되므로 이러한 통합이 원활합니다.

Wijmo Angular 10 컴포넌트는 이름에 "angular2" 단어가 있는 코어 라이브러리 모듈당 하나의 모듈 세트로 제공됩니다. 예를 들어 "wijmo.angular2.grid.js"모듈은 핵심 "wijmo.grid.js"모듈의 컨트롤 구성 요소를 나타냅니다. 모듈은 Wijmo for Angular npm 패키지 번들에 포함되어 있으며 여기에 설명 된대로 설치할 수 있습니다 .

모든 Wijmo 모듈은 이름은 "@grapecity/"로 시작하고 ".js" 확장자가없는 주변 이름을 사용하여 가져와야 합니다. 예를들어 이 import 문은 "wijmo.angular2.grid.js"모듈의 내용을 가져옵니다.

import * as wjGrid from "@grapecity/wijmo.angular2.grid";

Wijmo components 가져오기

이 설정을 사용하면 Wijmo Angular 10 모듈을 가져와서 포함된 컴포넌트 및 지시문을 사용할 수 있습니다. 예를 들어,이 코드는 WjFlexGrid 구성 요소를 MyCmp 컴포넌트의 템플릿에 추가 하고 flex 속성은 추가된 그리드에 대한 참조를 포함합니다.

import { Component, NgModule, ViewChild } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@grapecity/wijmo.angular2.grid';

@Component({
    template: '<wj-flex-grid #flex \[itemsSource\]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any\[\];
    @ViewChild('flex') flex: WjFlexGrid;

}

@NgModule({
    imports: \[WjGridModule, BrowserModule\],
    declarations: \[MyCmp\]
})
export class MyModule {
}

Angular의 모든 Wijmo 모듈에는 모듈의 모든 구성 요소를 내보내는 Angular 10 NgModule이 포함되어 있습니다. NgModule 컴포넌트 템플릿에서 이러한 컴포넌트를 사용하려면 Wijmo NgModule에 대한 참조를 NgModule 데코레이터의 imports 메타 데이터 속성에 추가하기 만하면됩니다.

NgModule의 이름은 다음 스키마를 사용하여 JavaScript 모듈 이름으로 구성됩니다.

Wj<JS module name without _wijmo.angular2_ prefix>Module

For example, WjInputModule NgModule for wijmo.angular2.input JavaScript module, or WjGridFilterModule NgModule for wijmo.angular2.grid.filter JavaScript module.

예를 들어, wijmo.angular2.input 자바 스크립트 모듈을 위한 WjInputModule NgModule, 또는 wijmo.angular2.grid.filter 자바 스크립트 모듈을 위한 WjGridFilterModule 에 대한 NgModule이 있습니다.

코드에서 Wijmo 컨트롤 만들기

Angular 10 용 Wijmo 컴포넌트 는 템플릿 마크업에 사용하기위한 것입니다. 코드에서 Wijmo 컨트롤을 만들려면 컴포넌트 대신, 핵심 모듈인 Wijmo 컨트롤 을 사용해야합니다 . 코어 모듈은 해당 Angular 10 interop 모듈과 이름이 같지만 이름에 "angular2"단어가 없습니다. 예를 들어 다음과 같은 코드로 FlexGrid 컨트롤을 만듭니다.

import { FlexGrid } from "@grapecity/wijmo.grid";
let flex = new FlexGrid("#host_element");

우리는 WjFlexGrid 컴포넌트 대신에, FlexGrid 컨트롤을 import 했습니다. 그리고 그것을 '@grapecity/wijmo.angular2.grid'대신에 '@grapecity/wijmo.grid' 모듈로 부터 가져왔음을 주의해야 합니다.

Wijmo css 추가하기

Wijmo 컨트롤이 올바르게 검색되고 작동하려면 Wijmo CSS 파일을 애플리케이션에 로드해야합니다. 이 스타일은 @gapercity/wijmo.styles npm 패키지부터 가져옵니다.

기본 styles.css 파일 상단에 이 import 문을 추가하여 Angular CLI 응용 프로그램에서 스타일을 로드할 수 있습니다.

@import "@grapecity/wijmo.styles/wijmo.css";

Angular CLI

Angular 앱 빌드를 시작하는 가장 쉬운 방법은 Angular CLI 도구를 사용하는 것입니다. 단계별 지침은 이 블로그를 참조하십시오 .

Wijmo Angular 앵귤러 마크 업

설명은 Angular 10 Markup Syntax 주제를 참조하십시오 .