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 上找到一个示例项目并实时观看。