Angular

Angular 앱에서 Magic Translate 사용하는 방법.Angular 클라이언트는 Angular 20 이상이 필요하고 zone.js 유무에 관계없이 작동해.

설치

앱에 Magic Translate 용 Angular 클라이언트를 설치해.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

그런 다음 애플리케이션 구성에 provideMagicTranslate 추가해.

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

API 키가 아직 없으면 Magic Translate 가입해서 얻어.

이제 <t> 구성 요소를 가져오는 모든 구성 요소에 사용할 수 있어.

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 {}

그게 다야.이제 네 앱을 70개 이상의 언어로 번역할 수 있어.

구성

provideMagicTranslate 다음 옵션 받아들여.

옵션	설명
`apiKey`	필수야.너의 Magic Translate API 키야.
`language`	필수야.콘텐츠가 번역되는 언어, 예를 들어 `'de'`.
`sourceLanguage`	템플릿이 작성된 언어.자동으로 감지되므로 감지 결과가 잘못된 경우에만 설정해.
`formality`	`'formal'` 아니면 `'informal'`.모든 언어에 지원되는 것은 아니야.번역할 때마다 다시 정의할 수 있어.
`debug`	콘솔에 요청을 기록해.

언어 바꾸기

현재 언어를 읽거나 변경하려면 MagicTranslate 서비스를 주입해.모든 <t> 구성 요소 및 t pipe 자동으로 업데이트돼.

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 시그널이니까 computed, effect 에서도 쓸 수 있어.

서버 사이드 렌더링

<t> 구성 요소와 t pipe 브라우저에서 번역돼.서버 사이드 렌더링을 사용하면 서버가 원본 콘텐츠를 렌더링하고 하이드레이션 후에 번역해.완전히 번역된 HTML을 대신 보내려면 사전 렌더링에 표시된 대로 페이지가 렌더링되는 동안 번역해.

예제 프로젝트

GitHub에서 예제 프로젝트를 찾아서 라이브로 볼 수 있어.