Angular

Angular uygulamalarında Magic Translate nasıl kullanılır. Angular istemcisi Angular 20 veya daha yenisini gerektirir ve zone.js ile ve olmadan çalışır.

Kurulum

Magic Translate için Angular istemcisini uygulamanıza yükleyin.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Ardından uygulama yapılandırmanıza provideMagicTranslate ekleyin.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideMagicTranslate, Language } from '@magic-translate/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMagicTranslate({
      apiKey: '<your-api-key>',
      language: Language.DE // any supported language
    })
  ]
};

Henüz bir API anahtarınız yoksa, bir tane almak için Magic Translate 'a kaydolun.

Artık <t> bileşenini, onu içe aktaran herhangi bir bileşende kullanabilirsiniz.

import { Component } from '@angular/core';
import { T } from '@magic-translate/angular';

@Component({
  selector: 'app-welcome',
  imports: [T],
  template: `<h1><t>Please translate me!</t></h1>`
})
export class Welcome {}

İşte bu kadar. Uygulamanız artık 70'den fazla dile çevrilebilir.

Yapılandırma

provideMagicTranslate şu seçenekleri kabul eder:

Seçenek	Açıklama
`apiKey`	Gerekli. Magic Translate API anahtarınız.
`language`	Gerekli. İçeriğinizin çevrildiği dil, örneğin `'de'`.
`sourceLanguage`	Şablonlarınızın yazıldığı dil. Otomatik olarak algılanır, bu nedenle yalnızca algılama yanlış sonuçlar verirse ayarlayın.
`formality`	`'formal'` veya `'informal'`. Tüm diller için desteklenmez. Her çeviri için geçersiz kılabilirsiniz.
`debug`	İstekleri konsola kaydeder.

Dilleri değiştirme

Geçerli dili okumak veya değiştirmek için MagicTranslate hizmetini enjekte edin. Her <t> bileşeni ve t pipe otomatik olarak güncellenir.

import { Component, inject } from '@angular/core';
import { MagicTranslate } from '@magic-translate/angular';

@Component({
  selector: 'app-language-switcher',
  template: `
    <div>Current language is: {{ magicTranslate.language() }}</div>
    <button (click)="magicTranslate.setLanguage('de')">German</button>
  `
})
export class LanguageSwitcher {
  protected readonly magicTranslate = inject(MagicTranslate);
}

language bir sinyaldir, bu yüzden computed ve effect olarak da kullanabilirsiniz.

Sunucu tarafı oluşturma

<t> bileşeni ve t pipe tarayıcıda tercüme edilir. Sunucu tarafı oluşturma ile sunucu orijinal içeriği oluşturur ve hidrasyondan sonra çevrilir. Bunun yerine tam tercüme edilmiş HTML göndermek için, Ön Enderleme'de gösterildiği gibi, oluşturulurken sayfayı çevirin.

Örnek proje

GitHub 'da örnek bir proje bulabilir ve canlı olarak görebilirsiniz.