Dokümantasyon

Ö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. Kullanıcılar ve arama motorları daha sonra her dilde tam tercüme edilmiş HTML alır.

Ö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 metnini çevirmek için bir rota çözümleyicide translate yöntemini kullanın. 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 }
  }
];

Çözülen çevirileri giriş olarak sayfa bileşenine iletmek için withComponentInputBinding() öğesini provideRouter 'e ekleyin.

Çözücü, derleme sunucunuzda çalışır, bu nedenle gizli anahtar ınızla çevirir. ng build 'yi çalıştırdığınız MAGIC_TRANSLATE_SECRET_KEY ortam değişkeni olarak ayarlayın, örneğin bir CI sırrı olarak. provideMagicTranslate 'e iletmeyin, çünkü bu yapılandırma tarayıcıda da çalışır.

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 yalnızca değiştirilen metinler sonraki derlemelerde kullanımınıza dahil edilir.

Öncekit pipeSonrakiVue