在 Angular 中集成

如果你正在寻找使用 Angular 组件作为自定义组件的方法,请参阅此处

在集成 Univer 到 Angular 项目前,请确保你已经阅读了安装和基本使用章节,并了解 Angular 组件和生命周期钩子。

集成步骤

  1. ngAfterViewInit 钩子中初始化 Univer
  2. ngOnDestroy 钩子中销毁 Univer

示例代码

TypeScript
import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'import type { Univer } from '@univerjs/presets'import { Component, ViewChild } from '@angular/core'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCorezhCN from '@univerjs/preset-docs-core/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-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(          UniverPresetDocsCorezhCN,        ),      },      presets: [        UniverDocsCorePreset({          container: this.container.nativeElement,        }),      ],    })    this.univer = univer    univerAPI.createDocument({})  }  ngOnDestroy() {    this.univer?.dispose()  }}

你觉得这篇文档如何?

© 2026 DreamNum Co., Ltd.