预渲染

<t> 组件和 t pipe 在浏览器中进行翻译。如果您预渲染 Angular 应用程序，则可以在构建时改为翻译页面。然后，用户和搜索引擎将收到每种语言的完全翻译过的 HTML。

示例项目每种语言预渲染一页。打开德语页面并检查网络流量：没有向 Magic Translate API 提出任何请求。

在解析器中翻译

为该语言添加路由参数，并在路由解析器中使用 translate 方法来翻译页面的文本。将结果存储在 Angular 的 TransferState 中，这样浏览器就可以重复使用它，而不是在水化后再次进行翻译。

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 以将解析后的翻译作为输入传递给页面组件。

解析器在您的编译服务器上运行，因此它会使用您的密钥进行转换。将其设置为运行 ng build 的 MAGIC_TRANSLATE_SECRET_KEY 环境变量，例如作为 CI 密钥。不要将其传递给 provideMagicTranslate，因为该配置也在浏览器中运行。

预渲染所有语言

告诉 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 文件。翻译会被缓存，因此只有更改过的文本才算作后续版本的使用量。