Ön düzenleme

<t> bileşeni ve t pipe tarayıcıda tercüme edilir. Angular uygulamanızı önceden yayınlarsanız sayfalarınızı derleme zamanında çevirebilirsiniz. HTML daha sonra gönderilmeden önce çevrilir, kullanıcılar çeviri için asla beklemiyor ve arama motorları her dili dizine ekliyor.

Örnek proje, dil başına bir sayfa ön ayarlar. Almanca sayfas ını açın ve ağ trafiğini inceleyin: Magic Translate API'sine herhangi bir istek yapılmaz.

Çözücüde çevirme

Dil için bir rota parametresi ekleyin ve sayfanın metinlerini translate yöntemiyle bir rota çözümleyicide çevirin. Sonucu Angular 'in TransferState 'inde saklayın, böylece tarayıcı hidrasyondan sonra tekrar çevirmek yerine yeniden kullanır.

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

provideRouter 'de withComponentInputBinding() ile çözülmüş çeviriler sayfa bileşeninin girdisi olarak gelir.

Her dili önceden çevirin

Angular hangi dillerin getPrerenderParams ile önceden yazılacağını söyleyin:

// 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 artık her dil için çevrilmiş bir HTML dosyası yazıyor. Çeviriler önbelleğe alınır, bu nedenle daha sonraki derlemeler yalnızca değiştirilen metinler için ödeme yapar.