Dokumentacja

Wstępne renderowanie

Komponent <t> i t pipe tłumaczą się w przeglądarce. Jeśli wstępnie renderujesz aplikację Angular, możesz zamiast tego przetłumaczyć swoje strony w czasie kompilacji. Użytkownicy i wyszukiwarki otrzymują następnie w pełni przetłumaczony HTML w każdym języku.

Przykładowy projekt prerenderuje jedną stronę na język. Otwórz stronę niemiecką i sprawdź ruch sieciowy: nie ma żądania do interfejsu API Magic Translate.

Przetłumacz w resolver

Dodaj parametr trasy dla języka i użyj metody translate w rozdzielaczu trasy, aby przetłumaczyć tekst strony. Przechowuj wynik w TransferState Angular, aby przeglądarka używała go ponownie zamiast tłumaczyć ponownie po nawodnieniu.

import { inject, makeStateKey, TransferState } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { MagicTranslate, type Languages } from '@magic-translate/angular';


const texts = {
  title: 'Welcome to our shop',
  intro: 'This page was translated when the app was built.'
};


type Texts = Record<keyof typeof texts, string>;


export const translationsResolver: ResolveFn<Texts> = async (route) => {
  const transferState = inject(TransferState);
  const magicTranslate = inject(MagicTranslate);
  const lang = (route.paramMap.get('language') ?? 'en') as Languages;
  const key = makeStateKey<Texts>(`translations-${lang}`);


  const transferred = transferState.get(key, null);
  if (transferred) return transferred;


  const entries = await Promise.all(
    Object.entries(texts).map(async ([name, text]) => [
      name,
      await magicTranslate.translate(text, { lang })
    ])
  );
  const translations = Object.fromEntries(entries) as Texts;
  transferState.set(key, translations);
  return translations;
};
// app.routes.ts
export const routes: Routes = [
  {
    path: ':language',
    component: Page,
    resolve: { translations: translationsResolver }
  }
];

Dodaj withComponentInputBinding() do provideRouter, aby przekazać rozwiązane tłumaczenia do komponentu strony jako dane wejściowe.

Resolver działa na serwerze kompilacji, więc tłumaczy się za pomocą tajnego klu cza. Ustaw ją jako zmienną środowiskową MAGIC_TRANSLATE_SECRET_KEY, w której uruchamiasz ng build, na przykład jako sekret CI. Nie przekazuj go do provideMagicTranslate, ponieważ ta konfiguracja działa również w przeglądarce.

Prerenderuj każdy język

Powiedz Angular, które języki mają być wstępnie renderowane za pomocą getPrerenderParams:

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';


export const serverRoutes: ServerRoute[] = [
  {
    path: ':language',
    renderMode: RenderMode.Prerender,
    getPrerenderParams: async () =>
      ['en', 'de', 'zh'].map((language) => ({ language }))
  }
];

ng build zapisuje teraz jeden przetłumaczony plik HTML na język. Tłumaczenia są przechowywane w pamięci podręcznej, więc tylko zmieniony tekst liczy się do wykorzystania w późniejszych kompilacjach.

Poprzedniet pipeKolejnyVue