Angular に統合する

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 UniverPresetSheetsCorejaJP from '@univerjs/preset-sheets-core/locales/ja-JP'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.JA_JP,      locales: {        [LocaleType.JA_JP]: mergeLocales(          UniverPresetSheetsCorejaJP,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.container.nativeElement,        }),      ],    })    this.univer = univer    univerAPI.createWorkbook({})  }  ngOnDestroy() {    this.univer?.dispose()  }}

このガイドはいかがですか？