Dokumentasi

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. Pengguna dan mesin pencari kemudian menerima HTML yang diterjemahkan sepenuhnya dalam 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 gunakan metode translate di resolver rute untuk menerjemahkan teks halaman. 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 }
  }
];

Tambahkan withComponentInputBinding() ke provideRouter untuk meneruskan terjemahan yang diselesaikan ke komponen halaman sebagai input.

Resolver berjalan di server build Anda, sehingga diterjemahkan dengan kunci rahasia Anda. Tetapkan sebagai variabel lingkungan MAGIC_TRANSLATE_SECRET_KEY tempat Anda menjalankan ng build, misalnya sebagai rahasia CI. Jangan meneruskannya ke provideMagicTranslate, karena konfigurasi itu juga berjalan di browser.

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 hanya teks yang diubah yang diperhitungkan dalam penggunaan Anda pada build selanjutnya.

Sebelumnyat pipeBerikutnyaVue