그 `t` pipe

모든 것을 컴포넌트에 담을 수 있는 건 아니야.placeholder 또는 title 같은 어트리뷰트는 문자열을 사용하며 가끔 타이프스크립트 코드에 번역이 필요할 때가 있어.이런 경우 t pipe 또는 MagicTranslate 서비스의 translate 방법을 사용해.

그 `t` pipe

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

@Component({
  selector: 'app-search',
  imports: [TranslatePipe],
  template: `<input [placeholder]="'Search products' | t" />`
})
export class Search {}

pipe 는 번역이 로드되기 전까지는 원본 텍스트를 반환해.<t> 구성 요소처럼, 언어와 형식을 옵션으로 사용해.

<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />

이 사용 텍스트를 자체적으로 편집하려면 id 필요해.

<button [title]="'Save' | t: { id: 'checkout-save' }"></button>

변수들

v 언어로 번역하면 안 되는 값을 전달하고 <t> 구성 요소와 마찬가지로 $name 참조해.

<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" />

<img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />

텍스트는 Search {0} products 로 한 번 번역되고 count 변경되면 캐시된 번역이 재사용돼.

코드로 번역하기

타이프스크립트에서 문자열을 번역하려면 MagicTranslate 서비스에서 translate 호출해.약속을 돌려줘.

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

const magicTranslate = inject(MagicTranslate);
const message = await magicTranslate.translate('Your order has been placed');

// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

lang 옵션 없으면 텍스트가 현재 언어로 번역돼.

translate 에는 변수도 필요해.

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});

그 t pipe

그 t pipe

변수들

코드로 번역하기

그 `t` pipe

그 `t` pipe