مقالات طراحی سایت

بعضی وقت ها لازم است وب اپلیکیشن شما چند زبانه باشد. با کمک Internationalization یا بصورت اختصار i18n میتوانید اپلیکیشن خود را چند زبانه کنید. هرچند خود انگولار امکان چند زبانه کردن وب اپ را دارد، اما پکیج ngx-translate کار چندزبانه کردن وب اپ را بسیار ساده تر میکند.

شروع کار

در ترمینال خود دستور زیر را بنویسید تا پکیج به اپلیکیشن شما اضافه شود.

 
$ npm i @ngx-translate/core --save
 

TranslateModule را به AppModule اضافه کنید.

 
...
@NgModule({
 imports: [
 BrowserModule,
 TranslateModule.forRoot()
 ],
 bootstrap: [AppComponent]
})
...
 

با اینکار شما به سرویس، پایپ، و دیرکتیو های translate دسترسی دارید. هرچند، بجز افزودن ترجمه بصورت دستی، احتمالا نیاز دارید لود ترجمه ها را تنظیم کنید.

Loaderها

سریعترین راه برای لود ترجمه ها افزودن فایل های ترجمه در پوشه assets و لود آنها از طریق TranslateHttpLoader است. این امکان در یک پکیج npm جداگانه قرار دارد.

 
$ npm install @ngx-translate/http-loader --save
 

// ...
export function createTranslateLoader(http: HttpClient) {
 return new TranslateHttpLoader(http);
}
@NgModule({
 imports: [
 BrowserModule,
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: createHttpLoader, // exported factory function needed for AoT compilation
 deps: [HttpClient]
 }
 })
 ],
 bootstrap: [AppComponent]
})
// ...

شما میتوانید loader خود را ایجاد کنید. برای اینکار تنها کافیست اینترفیس TranslateLoader را پیاده سازی کنید و مانند دستور بالا آنرا در ماژول اضافه کنید.

فایل های ترجمه

با ایجاد loader ترجمه شما باید فایل زبان با نام {lang}.json در پوشه /assets/i18n/ داشته باشید، که {lang} زبان فایلی است که برای ترجمه استفاده میکنید. برای مثال برای زبان انگلیسی از en.json و برای زبان فارسی از fa.json استفاده میشود. شما میتوانید با افزودن پارامتر اضافه به کانستراکتور new TranslateHttpLoader() مسیر پیش فرض فایل ها را تغییر دهید.

فایل ترجمه تنها یک آبجکت JSON با key-value متناظر است. مقدار key متنی که قرار است ترجمه شود را مشخص میکند و مقدار value متنی که قرار است نمایش داده شود را مشخص میکند. البته مقدار value میتواند یک آبجکت دیگر باشد که key-value خود را دارد. در این حالت شما میتوانید ترجمه های خود را گروه بندی کنید.

همچنین شما میتوانید نام متغیر را در value فایل JSON قرار دهید. با این کار شما میتوانید مقادیر string را بصورت داینامیک وارد ترجمه کنید. توجه داشته باشید مقدار ترجمه باید داخل براکت باشد.

 
{
 "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
 "login": {
 "username": "Enter your user name",
 "password": "Password here",
 }
}
 

دسترسی به ترجمه ها

قبل از اینکه بخواهید به فایل های ترجمه در اپلیکیشن خود دسترسی داشته باشید، شما باید برخی از پراپرتی های موجود در TranslateService را مقدمه سازی (initialize) کنید. بهترین جا برای این کار AppComponent است.

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent {
 constructor(translate: TranslateService) {
 translate.addLangs(['en', 'klingon'])
 translate.setDefaultLang('en');
 translate.use('en');
 }
}

اول از همه translate.addLangs([]) به سرویس میگوید کدام زبان ها برای ترجمه وجود دارد. متد translate.setDefaultLang('en') به شما این امکان را میدهد برای زمانی که ترجمه زبان مورد نظر وجود نداشت فالبک تعیین کنید. متد translate.use('en') به سرویس میگوید زبان اصلی که برای ترجمه استفاده میشود کدام است. پارامتر همه این زبان ها زبانی است که میخواهید ترجمه از آنجا باشد. توجه داشته باشید که این نام ها باید هم نام فایل JSON ترجمه باشند.

بعد از این تنظیمات شما میتوانید از سه روش به ترجمه ها دسترسی داشته باشید. استفاده از این شیوه ها به خود شما بستگی دارد.

TranslateService

در این سرویس دو متد برای گرفتن ترجمه وجود دارد. اولین شیوه استفاده از get(key: string|Array, interpolateParams?: Object) (استفاده از این شیوه پیشنهاد میشود). این متد یک Observable است که asynchronous باز میگرداند. این Observable به محض بازیابی مقدار پر میشود.

شیوه دم استفاده از instant(key: string|Array, interpolateParams?: Object) است که synchronous است. اگر فایل ترجمه شما در زمانی که شما از این متد استفاده میکنید لود نشده باشد ترجمه ای دریافت نمیکنید.

بخاطر داشته باشید که ما به سرویس گفته ایم زبان اصلی سایت en است، بنابراین تمام نتایج از en.json می آیند. شما میتوانید برای جابجایی بین زبان ها متد خود را پیاده سازی کنید. تنها با صدا زدن متد use(lang: string) از TranslateService مشخص میکنید که زبان اصلی سایت کدام است.

// ...
user: { firstName: string, lastName: string };
welcome: string;
usernameLabel: string;
passwordLabel: string;
constructor(private translate: TranslateService) { }
ngOnInit() {
 // synchronous. Also interpolate the 'firstName' parameter with a value
 this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });
 // asynchronous - gets translations then completes.
 this.translate.get(['login.username', 'login.password'])
 .subscribe(translations => {
 this.usernameLabel = translations['login.username'];
 this.passwordLabel = translations['login.password'];
 });
}

TranslatePipe

شما میتوانید از پایپ ترجمه مانند سایر پایپ های انگولار استفاده کنید. ورودی پایپ key فایل ترجمه است. این پایپ یک مقدار اختیاری دارد. این مقدار اختیاری یک آبجکت است که مقدار string مورد نیاز ترجمه را مشخص میکند. در مثال زیر کامپوننت ما یک آبجکت user با پراپرتی firstName دارد که با مقدار مورد انتظار welcomeMassage متناظر است.

 
<p>{{ 'welcomeMessage' | translate:user }}</p>
<input type="password" placeholder="{{ 'login.password' | translate }}">
 

TranslateDirective

شما میتوانید دیرکتیر را بر روی هر المان HTML که قرار است ترجمه شود قرار دهید. راه های مختلفی برای این کار است.

 
<label translate='login.username'></label>
 

همچنین میتوانید key ترجمه را بعنوان محتوای المان قرار دهید.

 
<p translate [translateParams]="{ firstName: user.firstName }">welcomeMessage</p>
 

به نقل از: Alligator.io