Intégrer dans Angular

Si vous cherchez comment utiliser des Angular en tant que composants personnalisés, consultez cette section.

Avant d’intégrer Univer dans un projet Angular, consultez l’installation et les premiers pas et familiarisez-vous avec les composants Angular et leurs hooks de cycle de vie.

Étapes d’intégration

Initialisez Univer dans ngAfterViewInit.
Libérez Univer dans ngOnDestroy.

Exemple de code

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 UniverPresetSheetsCorefrFR from '@univerjs/preset-sheets-core/locales/fr-FR'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.FR_FR,      locales: {        [LocaleType.FR_FR]: mergeLocales(          UniverPresetSheetsCorefrFR,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.container.nativeElement,        }),      ],    })    this.univer = univer    univerAPI.createWorkbook({})  }  ngOnDestroy() {    this.univer?.dispose()  }}

Que pensez-vous de ce guide ?