如何將 i18n 與作為 Angular 對象的組件輸入一起使用？

Question

有一種情況，輸入是在子組件上定義的，如下所示：

interface MyValues {
   text: string;
   path: string;
   someOtherValue: string;
}

@Input() myValues: MyValues;

我需要通過如下輸入將myValues從父組件傳遞給子組件：

<my-child-component [myValues]="myValues" />

由於它不是簡單的數據類型輸入，因此我無法使用此處Angular 文檔中推薦的 i18n 屬性樣式。 這是一個具有多個值的對象，因此在傳遞給子組件時無法對其進行翻譯（除非我遺漏了某些東西）。

在子組件中，有一些代碼如下：

<span *ngFor="let myValue of myValues">
   <a>{{myValue.Text}}</a>
</span>

通常我想做的是為需要翻譯的錨點分配一個 id，如下所示：

<a i18n="@@myChildComponent_text">{{myValue.Text}}</a>

這樣做的問題是它將在翻譯文件中創建一個名為@@myChildComponent_text以進行翻譯。 但是，傳遞給這個子組件的這個對象在myValues值是動態的，因此字面翻譯將根據傳入的內容而變化。

我的問題是，在將對象傳遞給子組件上的輸入時，我如何仍然利用i18n Angular 國際化能力和@@id自定義 ID，該對象將在其中具有需要轉換的不同物理值？

Answer 1

無法使用 angulars i18n 轉換動態字段。 因為最終它是一個簡單的文本替換會發生什么。

您向包含簡單文本的 HTML 標簽添加一個屬性。 ng extract命令創建一個文件（XLIFF 1.2（默認）、XLIFF 2、XML Message Bundle (XMB)），它可以與不同的工具（通常由翻譯器完成）一起使用來創建一個新的翻譯文件。 您可以使用每種語言的配置來擴展 angular.json，告訴 angular 應該使用哪個翻譯文件。 例如法語：

"configurations": {
...
"fr": {
  "aot": true,
  "outputPath": "dist/my-project-fr/",
  "i18nFile": "src/locale/messages.fr.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "fr",
  ...
}

當您現在使用ng-build --configuration=fr Angular 會用翻譯文件中的靜態文本替換您的靜態文本。 對於每種語言，都會構建一個單獨的應用程序。 當您部署您的應用程序時，您使用不同的 url 處理不同的語言，例如 host/my-app/fr 表示法語或 host/my-app/de 表示德語，每個都指向您的應用程序的特定翻譯版本。

這種方法的缺點是您無法處理動態值，因為它僅適用於靜態文本。 這就是您必須使用第三方庫來處理這種情況的原因。 一個常見的庫是ngx-translate 。 您可以在何處針對 json 文件解析 id。 如果您想使用多個翻譯文件，您還可以將ngx-translate-multi-http-loader與 ngx-translate 結合使用。

大多數情況下，您將 i18n 與 ngx-translate（或其他類似的庫）結合起來，以獲得完整的多語言支持。

2021 年 2 月 5 日編輯：

ngx-translate 的未來還不清楚，PRs 將被合並它目前是一種基本的支持。 更多信息在這里： https : //github.com/ngx-translate/core/issues/783

作為替代嘗試：

ngneat/transloco

Answer 2

您應該使用ngx-translate https://github.com/ngx-translate/core 。

定義翻譯：導入TranslateModule 后，您可以將翻譯放在一個 json 文件中，該文件將與 TranslateHttpLoader 一起導入。 以下翻譯應存儲在en.json 中。

{
    "HELLO": "hello {{value}}"
}

您還可以使用setTranslation手動定義翻譯。

translate.setTranslation('en', {
    HELLO: 'hello {{value}}'
});

TranslateParser理解嵌套的 JSON 對象。 這意味着您可以得到如下所示的翻譯：

{
    "HOME": {
        "HELLO": "hello {{value}}"
    }
}

使用服務、管道或指令：您可以使用TranslateService 、 TranslatePipe或TranslateDirective來獲取翻譯值。

使用service ，它看起來像這樣：

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

這是您使用管道的方式：

<div>{{ 'HELLO' | translate:param }}</div>

並在您的組件中像這樣定義參數：

param = {value: 'world'};

這是您使用指令的方式：

<div [translate]="'HELLO'" [translateParams]="{value: 'world'}"></div>

或者更簡單地使用元素的內容作為鍵：

<div translate [translateParams]="{value: 'world'}">HELLO</div>

Answer 3

我遇到了類似的情況，多選組件需要在初始化之前設置某些選項。

我是這樣解決的：

#頁面組件

dropdownSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'nameNl',
    selectAllText: 'Select all',
    unSelectAllText: 'Deselect all',
    itemsShowLimit: 3,
    allowSearchFilter: true
};

updateDropdownSettingsOnLanguageChange(selectAllText: string, unSelectAllText: string) {
    this.dropdownSettings.selectAllText = selectAllText;
    this.dropdownSettings.unSelectAllText = unSelectAllText;
    return this.dropdownSettings;
}

#組件 HTML

<ng-multiselect-dropdown [data]="availableLabels"
[settings]="updateDropdownSettingsOnLanguageChange(('service-dropdown.select-all' | translate), ('service-dropdown.deselect-all' | translate))">
                        </ng-multiselect-dropdown>