Angular интернационализация (i18n) и * ngFor

У меня есть простой общий компонент в 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.

Ответы

Ответ 1

Я искал то же самое, а также для возможности динамического перевода без ngx-translate. ocombe, кажется, является единственным, ответственным за i18n в Angular. В этом выпуске GitHub # 16477 он опубликовал какую-то дорожную карту для i18n в Angular.

▢ Используйте строки перевода за пределами шаблона - # 11405 [заблокировано runtime i18n]

Как вы можете видеть, эта функция еще не реализована в Angular, но она запланирована. Успешно блокирует эту функцию:

▢ Runtime i18n (один пучок для всех локалей с AOT) - [работает над ним]

Я не помню, где я его читал, но думаю, что ocombe написал, они хотят реализовать эту функцию еще в Angular 5, чтобы она могла быть доступна до spring 2018 (Angular дорожная карта говорит, что Angular 6 будет опубликован в spring 2018)

Дата: март/апрель 2018 года; Стабильная версия: 6.0.0

ocombe только что отправил this сегодня:

Я не тот, кто работает над этой функцией, и это праздники ломаются, я дам вам знать, как только я узнаю больше

Таким образом, остается только использовать ngx-translate, если вы не можете ждать, или вы можете подписаться на эти проблемы GitHub # 11405 и # 16477 и обновляться до тех пор, пока они не сделают эту функцию доступной. Надеюсь, в начале 2018 года:)

PS: Насколько я понял, они также хотят реализовать динамический перевод, но я думаю, что он не будет доступен до Angular 6.

UPDATE:

Теперь он официально: Runtime i18n не будет перед Angular 6 (см.: 11405#issuecomment-358449205)

EDIT:
Я нашел грязный взломать это. вы можете создавать скрытые теги 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);
}