Angular 国际化 (i18n) 和 *ngFor [英] Angular internationalization (i18n) and *ngFor

问题描述

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

I have a simple generic component in Angular which receives a list of strings and creates a radio group for these strings:

@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.

I need the radio group labels internationalized.
The official i18n documentation of Angular talks only about static HTML.

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

Is there any way to internationalize dynamic components (like *ngFor entries) with i18n template translation?

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

I'm aware of ngx-translate way, I'm interested particularly in i18n way.

推荐答案

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

I was looking for the very same thing and also for an option to do dynamic translation without ngx-translate. ocombe seems to be the one responible for i18n at Angular. In this GitHub issue #16477 he posted some kind of roadmap for i18n in Angular.

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

▢ Use translation strings outside of a template - #11405 [blocked by runtime i18n]

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

As you can see this feature is not implemented in Angular yet but it's planned. The issue that is blocking this feature luckily is in progress:

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

▢ Runtime i18n (one bundle for all locales with AOT) - [working on it]

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

I don't remember where I read it but I think ocombe wrote, they want to implement this feature still in Angular 5 so it might be available before spring 2018 (the Angular roadmap says Angular 6 will be published in spring 2018)

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

Date: March/April 2018; Stable Release: 6.0.0

ocombe 今天刚刚发布了 这个:

ocombe just posted this today:

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

I'm not the one working on this feature, and it's the holidays break, I'll let you know as soon as I know more

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

So all that remains is to use ngx-translate if you cannot wait, or you could subscribe to these GitHub issues #11405 & #16477 and get updated until they make this feature available. Hopefully early 2018 :)

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

PS: as far as I understood they also want to implement dynamic translation, but I think it wont be available before Angular 6.

更新:

现在它是官方的:运行时 i18n 不会在 Angular 6 之前(参见:11405#issuecomment-358449205)

Now it's official: Runtime i18n wont be before Angular 6 (see: 11405#issuecomment-358449205)

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

I found a dirty hack to do that. you can create hidden div tags for your translations and save them via ViewChildren in a map for further use. You could even subscribe to the elements to update them.

@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);
}

这篇关于Angular 国际化 (i18n) 和 *ngFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！