Документация

Предварительная визуализация

Компонент <t> и t pipe переводятся в браузере. Если вы предварительно отрендерите приложение Angular, вместо этого вы сможете переводить страницы во время сборки. Затем HTML-код переводится перед отправкой, пользователи не дожидаются перевода, а поисковые системы индексируют все языки.

В примере проекта предварительно отображается одна страница на каждый язык. Откройте страницу на немецком языке и проверьте сетевой трафик: запросы к API Magic Translate не поступают.

Переведите в резольвере

Добавьте параметр маршрута для языка и переведите тексты страницы в преобразователе маршрутов с помощью метода translate. Сохраните результат в файле TransferState Angular, чтобы браузер использовал его повторно, а не переводил повторно после гидратации.

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 }
  }
];

При использовании withComponentInputBinding() в provideRouter разрешенные переводы поступают в качестве входных данных в компонент страницы.

Предпросмотр каждого языка

Укажите Angular, на каких языках следует предварительно рендерить с помощью 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 теперь записывает один переведенный HTML-файл на каждый язык. Переводы кэшируются, поэтому в последующих сборках оплата производится только за измененный текст.

Предыдущееt pipeСледующийNext.js