loader.config 정의


loader 모듈을 가져온 뒤, loader.config 를 통해 기본 설정을 하고, 필요한 items 을 import 합니다. 

설정은 루트 컴포넌트인 app.component.ts 에서 한 번만 호출하시면 됩니다.

plugin: 플러그인 파일들. (사용하지 않을 것이면 선언하지 않아도 됨.)

locales: 언어 파일 (기본값: ko.js)

theme: css 파일 테마 (기본값: default)

license: 라이센스



app.component.ts


import { Component } from '@angular/core';
import loader from '@ibsheet/loader';

loader.config({
  registry: {
    name: 'ibsheet',
    baseUrl: '/assets/ibsheet'
  }
});

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loaderVersion = loader.version;
}




page1.component.ts


컴포넌트 페이지에서 마운트 시점에 IBSheet8 객체를 생성, 언마운트 시점에 IBSheet8 객체를 제거하도록 합니다. 

import { Component, OnInit, OnDestroy } from '@angular/core';
import loader from '@ibsheet/loader';
import { SheetSampleData } from '../shared/ibsheet-data';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit, OnDestroy {
  sheetId = '';
  ngOnInit() {
    const A = this;
    const { options, data } = SheetSampleData[0];
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet: { id: any; }) => {
      // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 
      A.sheetId = sheet.id;
      console.log('created sheet', sheet.id);
    });
  }
  ngOnDestroy() {
    loader.removeSheet(this.sheetId);
  }
}


참고 사항1


.then 시점에서 IBSheet8 객체가 생성되지만, 초기화가 완료된 상태가 아니기 때문에 이 시점에서 IBSheet8 객체의 함수를 통한 조회나 수정(행추가등)등의 기능을 사용하시면 안됩니다.

이와 같은 기능의 사용은 반드시 onRenderFirstFinish 이벤트에 로직을 구성하여야 합니다.



참고 사항2


ibsheet-common.js 에 있는 IB_Preset 변수의 경우, window 객체에 들어가있습니다.

React 스코프와 다르기 때문에 사용시 참고해주시기 바랍니다.



참고 사항3


loader.getIBSheetStatic() 을 사용하여 시트 전역 객체를 가져올 수 있습니다.


// 시트 Static 객체 가져오기
const IBSheet = loader.getIBSheetStatic();
// id 가 sheet 인 시트 객체를 가져오기
console.log(IBSheet["sheet"]);