Интеграция в Angular
Если вы ищете информацию о том, как использовать веб-компоненты в качестве пользовательских компонентов, обратитесь к этому разделу.
Перед интеграцией Univer в проект Angular прочитайте раздел установки и базовой настройки и ознакомьтесь с компонентами Angular и хуками их жизненного цикла.
Шаги интеграции
- Инициализируйте Univer в
ngAfterViewInit. - Освободите Univer в
ngOnDestroy.
Пример кода
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 UniverPresetSheetsCoreruRU from '@univerjs/preset-sheets-core/locales/ru-RU'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.RU_RU, locales: { [LocaleType.RU_RU]: mergeLocales( UniverPresetSheetsCoreruRU, ), }, presets: [ UniverSheetsCorePreset({ container: this.container.nativeElement, }), ], }) this.univer = univer univerAPI.createWorkbook({}) } ngOnDestroy() { this.univer?.dispose() }}Насколько полезно это руководство?