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

我需要国际化的广播组标签.
Angular的官方i18n 文档仅讨论静态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的路线图. /p>

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年春季之前可用(

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问题#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);
}

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