Angular에 통합하기

웹 컴포넌트를 사용자 정의 컴포넌트로 사용하는 방법을 찾고 있다면 여기를 참고하세요.

Angular 프로젝트에 Univer를 통합하기 전에 설치 및 기본 사용법을 읽고 Angular 컴포넌트와 수명 주기 훅을 이해하세요.

통합 단계

ngAfterViewInit 훅에서 Univer를 초기화합니다.
ngOnDestroy 훅에서 Univer를 해제합니다.

예제 코드

TypeScript

import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'import type { Univer } from '@univerjs/presets'import { Component, ViewChild } from '@angular/core'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCorekoKR from '@univerjs/preset-sheets-core/locales/ko-KR'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'@Component({  selector: 'app-univer',  standalone: true,  template: '<div #container style="height: 600px"></div>',})export class UniverComponent implements AfterViewInit, OnDestroy {  @ViewChild('container') container!: ElementRef<HTMLDivElement>  private univer?: Univer  ngAfterViewInit() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.KO_KR,      locales: {        [LocaleType.KO_KR]: mergeLocales(          UniverPresetSheetsCorekoKR,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.container.nativeElement,        }),      ],    })    this.univer = univer    univerAPI.createWorkbook({})  }  ngOnDestroy() {    this.univer?.dispose()  }}

이 가이드는 어떠셨나요?