Sitecoreアイテムに保存された翻訳を使用する

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SPEAK 3翻訳メカニズムは、Angular ngx-translateサービスを使用します。Sitecoreアイテムで翻訳を定義し、これらの翻訳を取得して使用するようにngx-translateを設定できます。これにはSciTranslateLoaderサービスを使用します

このトピックでは、次の方法について説明します。

Sitecoreインスタンスで翻訳を指定する

Sitecoreインスタンスで翻訳を指定するには:

Speak3DictionaryFolderテンプレートを使用して、アプリケーション項目の子としてTranslationsという項目を作成します。名前Translationsは規則にすぎませんが、Dictionaryは使用できません (その名前は予約されています)。
必要な翻訳ごとにSpeak3DictionaryEntryテンプレートに基づいてアイテムを追加します。これらすべてのアイテムをTranslationsアイテムの直接の子として追加します。これらの項目のKeyフィールドにはすべて大文字で値を入力することをお勧めします。
TranslationsフォルダのアイテムIDをメモします。これは、後で設定するために必要になります。

このアプローチでは、NgScModuleがこれらの機能をエクスポートするため、ngx-translateのサービスとパイプを通常どおり使用できます。

次の例は、基本的な使用方法を示しています。

import { Component } from '@angular/core';
import { NgScService } from '@speak/ng-sc';
@Component({
  selector: 'app-translate-demo',
  template: `
    <h1>Translate demo</h1>
    <button [disabled]="locale === 'en'" (click)="switchLocale('en')">EN</button>
    <button [disabled]="locale === 'da'" (click)="switchLocale('da')">DK</button>
    <button [disabled]="locale === 'ca-ES'" (click)="switchLocale('ca-ES')">CAT</button>
    <div>Fish: <span>{{ 'FISH' | translate }}</span></div>
    <div>Pork: <span>{{ 'PORK' | translate }}</span></div>
    <div>Vegetables: <span>{{ 'VEGETABLE' | translate }}</span></div>
  `
})
export class TranslateDemoComponent {
  // The currently active language.
  locale = 'en';
  constructor(
    private ngScService: NgScService
  ) {}
  // This method will switch the active language.
  switchLocale(lang) {
    this.locale = lang;
    this.ngScService.switchLanguage(lang);
  }
}

TranslateModuleモジュールを個別に構成する

TranslateModuleモジュールを個別に構成するには、NgScModuleを使用しない場合に、次の操作を行います。

app.module.ts年:

import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { SciTranslateLoader, TRANSLATE_ITEM_ID } from '@speak/ng-sc/ngx-translate-loader';
// other imports here
@NgModule({
  imports: [
    // other imported modules here
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: SciTranslateLoader,
        deps: [Http, TRANSLATE_ITEM_ID]
      }
    })
  ],
  providers: [
    { provide: TRANSLATE_ITEM_ID, useValue: '99228409-8417-4692-A5B9-E59CC8AC74B9' }
  ]
})
export class AppModule { }

ngx-translateを使用して、Angularアプリで翻訳を提供できます。公式のngx-translateドキュメントに詳細情報があります。

この記事を改善するための提案がある場合は、お知らせください!