在 Angular 中整合
如果你正在尋找使用 Angular 元件作為自訂元件的方法，請參閱此處。
將 Univer 整合到 Angular 專案前，請先閱讀安裝與基本使用章節，並了解 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 UniverPresetSheetsCorezhTW from '@univerjs/preset-sheets-core/locales/zh-TW'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.ZH_TW, locales: { [LocaleType.ZH_TW]: mergeLocales( UniverPresetSheetsCorezhTW, ), }, presets: [ UniverSheetsCorePreset({ container: this.container.nativeElement, }), ], }) this.univer = univer univerAPI.createWorkbook({}) } ngOnDestroy() { this.univer?.dispose() }}你覺得這篇文檔如何？