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でサンプルプロジェクトを見つけて、ライブで見ることができる。