角度国际化(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;
}

我需要国际化的广播组标签.
官方i18n 文档中Angular只有大约静态HTML会谈.

有没有办法*ngFor通过i18n模板转换使动态组件(如条目)国际化？

我知道ngx-translate方式,我特别感兴趣i18n.

Answer 1

我一直在寻找同样的东西，并且也在寻找一种无需 ngx-translate 即可进行动态翻译的选项。 \n ocombe似乎是 Angular 负责 i18n 的人。在这个 GitHub 问题#16477中，他发布了某种 Angular 中的 i18n 路线图。

\n\n

\n

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

\n

\n\n

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

\n\n

\n

\xe2\x96\xa2 Runtime i18n（适用于所有具有 AOT 的语言环境的捆绑包）- [正在处理]

\n

\n\n

我不记得我在哪里读到的，但我认为 ocombe 写道，他们希望仍然在 Angular 5 中实现此功能，因此它可能会在 2018 年春季之前可用（Angular 路线图称 Angular 6 将在 2018 年春季发布）

\n\n

\n

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

\n

\n\n

奥科姆今天刚刚发布了此内容：

\n\n

\n

我不是开发此功能的人，而且现在是假期，一旦我了解更多信息，我会立即通知您

\n

\n\n

因此，如果您等不及的话，剩下的就是使用 ngx-translate，或者您可以订阅这些 GitHub issues #11405和#16477并获取更新，直到他们提供此功能。希望2018年初:)

\n\n

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

\n\n

更新：

\n\n

现在官方宣布：运行时 i18n 不会早于 Angular 6（请参阅：11405#issuecomment-358449205）

\n\n

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

\n\n

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

\n