Integrar en Angular

Consulta primero la instalación y el uso básico. Este ejemplo usa Angular para montar Univer Boards en un contenedor con una altura explícita.

Pasos de integración

  1. Inicializa Univer en ngAfterViewInit.
  2. Libera Univer en ngOnDestroy.

Código de ejemplo

TypeScript
import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'import { Component, ViewChild } from '@angular/core'import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIesES from '@univerjs-pro/boards-ui/locale/es-ES'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIesES from '@univerjs-pro/ink-ui/locale/es-ES'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIesES from '@univerjs/docs-ui/locale/es-ES'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIesES from '@univerjs/drawing-ui/locale/es-ES'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs-pro/ink-ui/lib/index.css'import '@univerjs-pro/boards-ui/lib/index.css'@Component({  selector: 'app-univer',  standalone: true,  template: '<div #container style="height: 600px"></div>',})export class UniverComponent implements AfterViewInit, OnDestroy {  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>  private univer?: Univer  ngAfterViewInit() {    const container = this.containerRef.nativeElement    const univer = new Univer({      locale: LocaleType.ES_ES,      locales: {        [LocaleType.ES_ES]: mergeLocales(          DesignesES,          UIesES,          DocsUIesES,          DrawingUIesES,          InkUIesES,          BoardsUIesES,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'your license.txt',    })    univer.registerPlugin(UniverRenderEnginePlugin)    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverDocsPlugin)    univer.registerPlugin(UniverDocsUIPlugin)    univer.registerPlugin(UniverDrawingPlugin)    univer.registerPlugin(UniverDrawingUIPlugin)    univer.registerPlugin(UniverInkUIPlugin)    univer.registerPlugin(UniverBoardsPlugin)    univer.registerPlugin(UniverBoardsUIPlugin)    univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})    this.univer = univer  }  ngOnDestroy() {    this.univer?.dispose()  }}

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.