Angular

Jak korzystać z Magic Translate w aplikacjach Angular. Klient Angular wymaga Angular 20 lub nowszego i współpracuje z zone.js i bez niego.

Instalacja

Zainstaluj klienta Angular dla Magic Translate w swojej aplikacji.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Następnie dodaj provideMagicTranslate do konfiguracji aplikacji.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideMagicTranslate, Language } from '@magic-translate/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMagicTranslate({
      apiKey: '<your-api-key>',
      language: Language.DE // any supported language
    })
  ]
};

Jeśli nie masz jeszcze klucza API, zarejestruj się w Magic Translate, aby go otrzymać.

Teraz możesz użyć komponentu <t> w dowolnym komponencie, który go importuje.

import { Component } from '@angular/core';
import { T } from '@magic-translate/angular';

@Component({
  selector: 'app-welcome',
  imports: [T],
  template: `<h1><t>Please translate me!</t></h1>`
})
export class Welcome {}

To wszystko. Aplikację można teraz przetłumaczyć na ponad 70 języków.

Konfiguracja

provideMagicTranslate akceptuje następujące opcje:

Opcja	Opis
`apiKey`	Wymagane. Twój klucz API Magic Translate.
`language`	Wymagane. Język, na który jest przetłumaczona treść, na przykład `'de'`.
`sourceLanguage`	Język, w którym zapisane są Twoje szablony. Jest wykrywany automatycznie, więc ustaw go tylko wtedy, gdy wykrycie daje błędne wyniki.
`formality`	`'formal'` lub `'informal'`. Nie jest obsługiwany we wszystkich językach. Możesz go zastąpić dla każdego tłumaczenia.
`debug`	Rejestruje żądania do konsoli.

Zmiana języków

Wstrzyknij usługę MagicTranslate, aby odczytać lub zmienić bieżący język. Każdy składnik <t> i t pipe aktualizuje się automatycznie.

import { Component, inject } from '@angular/core';
import { MagicTranslate } from '@magic-translate/angular';

@Component({
  selector: 'app-language-switcher',
  template: `
    <div>Current language is: {{ magicTranslate.language() }}</div>
    <button (click)="magicTranslate.setLanguage('de')">German</button>
  `
})
export class LanguageSwitcher {
  protected readonly magicTranslate = inject(MagicTranslate);
}

language to sygnał, więc możesz go również używać w computed i effect.

Renderowanie po stronie serwera

Komponent <t> i t pipe tłumaczą się w przeglądarce. Dzięki renderowaniu po stronie serwera serwer renderuje oryginalną zawartość i jest ona tłumaczona po nawodnieniu. Aby zamiast tego wysłać w pełni przetłumaczony kod HTML, przetłumacz stronę podczas render owania, jak pokazano w Wstępnym renderowaniu.

Przykładowy projekt

Możesz znaleźć przykładowy projekt na GitHub i zobaczyć go na żywo.