Pre-Endering

Komponen <t> dan t pipe diterjemahkan di browser. Jika Anda melakukan prarender aplikasi Angular, Anda dapat menerjemahkan halaman Anda pada waktu pembuatan sebagai gantinya. HTML kemudian diterjemahkan sebelum dikirim, pengguna tidak pernah menunggu terjemahan, dan mesin pencari mengindeks setiap bahasa.

Contoh proyek pr arender satu halaman per bahasa. Buka halaman Jerman dan periksa lalu lintas jaringan: tidak ada permintaan yang dibuat ke API Magic Translate.

Terjemahkan dalam resolver

Tambahkan parameter rute untuk bahasa, dan terjemahkan teks halaman dalam resolver rute dengan metode translate. Simpan hasilnya di Angular TransferState, sehingga browser menggunakannya kembali alih-alih menerjemahkan lagi setelah hidrasi.

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

Dengan withComponentInputBinding() di provideRouter, terjemahan yang diselesaikan tiba sebagai masukan komponen halaman.

Prarender setiap bahasa

Beri tahu Angular bahasa mana yang akan di-prarender dengan 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 sekarang menulis satu file HTML terjemahan per bahasa. Terjemahan di-cache, jadi build nantinya hanya membayar untuk teks yang berubah.