在 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 UniverPresetSheetsCorezhCN from '@univerjs/preset-sheets-core/locales/zh-CN'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_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCorezhCN, ), }, presets: [ UniverSheetsCorePreset({ container: this.container.nativeElement, }), ], }) this.univer = univer univerAPI.createWorkbook({}) } ngOnDestroy() { this.univer?.dispose() }}你觉得这篇文档如何?