Angular

Cách sử dụng Magic Translate trong các ứng dụng Angular. Máy khách Angular yêu cầu Angular 20 hoặc mới hơn và hoạt động với và không có zone.js.

Lắp đặt

Cài đặt ứng dụng Angular cho Magic Translate trong ứng dụng của bạn.

# using npm
npm i @magic-translate/angular

# using yarn
yarn add @magic-translate/angular

Sau đó thêm provideMagicTranslate vào cấu hình ứng dụng của bạn.

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

Nếu bạn chưa có khóa API, hãy đăng ký Magic Translate để nhận khóa.

Bây giờ bạn có thể sử dụng thành phần <t> trong bất kỳ thành phần nào nhập nó.

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

Đó là nó. Ứng dụng của bạn hiện có thể được dịch sang hơn 70 ngôn ngữ.

Cấu hình

provideMagicTranslate chấp nhận các tùy chọn sau:

Thay đổi ngôn ngữ

Chèn dịch vụ MagicTranslate để đọc hoặc thay đổi ngôn ngữ hiện tại. Mỗi thành phần <t> và t pipe cập nhật tự động.

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 là một tín hiệu, vì vậy bạn cũng có thể sử dụng nó trong computed và effect.

Kết xuất phía máy chủ

Thành phần <t> và t pipe dịch trong trình duyệt. Với kết xuất phía máy chủ, máy chủ hiển thị nội dung gốc và nó được dịch sau khi hydrat hóa. Thay vào đó, để gửi HTML được dịch đầy đủ, hãy dịch trang trong khi nó được hiển thị, như được hiển thị trong Pre- endering.

Dự án ví dụ

Bạn có thể tìm thấy một dự án ví dụ trên GitHub và xem nó trực tiếp.