Angular 国际化 (i18n) 和 *ngFor

Question

我在Angular 中有一个简单的通用组件，它接收字符串列表并为这些字符串创建一个单选组：

@Component({
  selector: 'radio-group',
  templateUrl: 
           `<div *ngFor="let item of items">
                 <label for="input_{{item}}">{{item}}</label>
                 <input type="radio" id="input_{{item}}" value="{{item}}" [formControl]="radioControl">
           </div>`,
  styleUrls: ['./radio-group.component.scss']
})
export class RadioGroupComponent {
    @Input()
    items: string[];
    @Input()
    radioControl: FormControl;
}

我需要国际化电台组标签。
Angular 的官方i18n documentation 只谈论静态HTML。

有没有办法通过i18n 模板翻译来国际化动态组件（如*ngFor 条目）？

我知道ngx-translate 方式，我对i18n 方式特别感兴趣。

Answer 1

我一直在寻找同样的东西，同时也在寻找一个不使用 ngx-translate 进行动态翻译的选项。 ocombe 似乎是 Angular 中 i18n 的负责人。在这个 GitHub 问题 #16477 中，他发布了一些关于 Angular 中 i18n 的路线图。

▢ 在模板之外使用翻译字符串 - #11405 [被运行时 i18n 阻止]

如您所见，该功能尚未在 Angular 中实现，但已在计划中。幸运的是，阻止此功能的问题正在进行中：

▢ 运行时 i18n（一个适用于所有带 AOT 的语言环境的捆绑包）- [正在开发中]

我不记得我在哪里读到的，但我认为 ocombe 写道，他们希望仍在 Angular 5 中实现此功能，因此它可能在 2018 年春季之前可用（Angular roadmap 表示 Angular 6 将于 2018 年春季发布)

日期：2018 年 3 月/4 月；稳定版：6.0.0

ocombe 今天刚刚发布了this：

我不是开发此功能的人，现在是假期，我会在知道更多信息后立即通知您

所以剩下的就是使用 ngx-translate 如果您迫不及待，或者您可以订阅这些 GitHub 问题 #11405 和 #16477 并在他们提供此功能之前进行更新。希望 2018 年初 :)

PS：据我了解，他们也想实现动态翻译，但我认为在 Angular 6 之前它不会可用。

更新：

现在正式发布：运行时 i18n 不会出现在 Angular 6 之前（请参阅：11405#issuecomment-358449205）

编辑：
我发现了一个肮脏的黑客来做到这一点。您可以为您的翻译创建隐藏的 div 标签，并通过 ViewChildren 将它们保存在地图中以供进一步使用。您甚至可以订阅元素来更新它们。

@ViewChildren('test') myChildren; // the class needs to implement AfterViewInit
myMap = new Map();
ngAfterViewInit() {
  this.myChildren.forEach(value => this.myMap.set(value.nativeElement.getAttribute('name'), value.nativeElement.innerHTML));
  console.log(this.myMap);
}

Answer 2

我正在使用@ngx-translate。我所做的是，我声明了我想要在两种语言文件中翻译的内容，在我的情况下为es.json 和en.json。

es.json：

        "CONTENTS": {
    "CONT_1": "TEXTO_1",
    "CONT_2": "TEXTO_1",
    "CONT_3": "TEXTO_1",
    "CONT_4": "TEXTO_1",
    "CONT_5": "TEXTO_1",
    "CONT_6": "TEXTO_1",
    "CONT_7": "TEXTO_1",
    "CONT_8": "TEXTO_1",
    "CONT_9": "TEXTO_1",
    "CONT_10": "TEXTO_1",
    "CONT_11": "TEXTO_1"
}

en.json：

    "CONTENTS": {
    "CONT_1": "TEXT_1",
    "CONT_2": "TEXT_1",
    "CONT_3": "TEXT_1",
    "CONT_4": "TEXT_1",
    "CONT_5": "TEXT_1",
    "CONT_6": "TEXT_1",
    "CONT_7": "TEXT_1",
    "CONT_8": "TEXT_1",
    "CONT_9": "TEXT_1",
    "CONT_10": "TEXT_1",
    "CONT_11": "TEXT_1"
}

在我要翻译的组件中，在我的例子中是contents.component.ts，我：i) 声明一个内容数组； ii) 注入翻译服务； iii) 设置它； iv) 循环一个 for 你在其中构造一个看起来像这样的对象，

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-contents',
  templateUrl: './contents.component.html',
  styleUrls: ['./contents.component.css']
})
export class ContentsComponent implements OnInit {
  // i) Declare an array
  public contents = [];
  // inject the translateService
  constructor(public translateService: TranslateService) {
    // iii) set it
    translateService.addLangs(['es', 'en']);
    translateService.setDefaultLang('es');
    const browserLang = translateService.getBrowserLang();
    translateService.use(browserLang.match(/es|en/) ? browserLang : 'es');
    // loop for build a content object and push to the array
    for (let index = 1; index <= 11; index++) {
      const contentObj = {
        id: index,
        content: 'CONTENTS.CONT_' + index.toString()
      };
      this.contents.push(contentObj);
    }
  }
  ngOnInit() {
  }
}

最后，在我的contents.component.html中是这样的

<ul>
    <li *ngFor= "let content of contents" >
        {{  content.content | translate }}
    </li>
</ul>

您可以改进此代码并使其变得更好:) 我希望有用。

Answer 3

在 Angular 9 中，您可以像这样使用全局 $localize 函数：

$localize`String to translate`

关于此的精彩文章：https://blog.ninja-squad.com/2019/12/10/angular-localize/