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 documentation仅讨论静态HTML。

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

我知道ngx-translate方式，我特别感谢i18n方式。

Answer 1

我一直在寻找同样的东西，也可以选择在没有ngx-translate的情况下进行动态翻译。 ocombe似乎是Angular对i18n负责的人。在这个GitHub问题#16477中，他在Angular上发布了i18n的某种路线图。

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

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

▢Runtimei18n（AOT所有语言环境的一个包） - [正在处理]

我不记得我在哪里读它但是我认为ocombe写道，他们想要在Angular 5中实现这个功能，所以它可能在2018年春天之前可用（Angular roadmap说Angular 6将在2018年春季）

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

ocombe今天刚刚发布了this：

我不是那个正在使用此功能的人，这是假期休息，我会在知道更多信息后立即通知你

所以剩下的就是如果你不能等待就使用ngx-translate，或者你可以订阅这些GitHub问题#11405＆amp; #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

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

$localize`String to translate`

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

Answer 3

我正在使用@ 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）循环一个，在其中构造一个看起来像这样的对象，

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>

您可以改进此代码并将其改进为:)我希望会有用。

角度国际化（i18n）和* ngFor

3 个答案: