2017-01-24 20 views
9

Tôi có một thành phần chung đơn giản trong Angular mà nhận được một danh sách các chuỗi và tạo ra một nhóm radio cho những chuỗi:quốc tế hóa kiễu góc (i18n) và * ngFor

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

Tôi cần nhóm phát thanh quốc tế hóa nhãn.
Chính thức i18ndocumentation của Angular chỉ nói về HTML tĩnh.

Có cách nào để quốc tế hóa các thành phần động (chẳng hạn như *ngFor mục nhập) với i18n bản dịch mẫu không?

Tôi biết về ngx-translate cách, tôi quan tâm đặc biệt theo cách i18n.

+0

Tốt hơn là làm điều này trong .ts nhưng chưa có sẵn như là một phần của angular2 i18n. Yêu cầu tương tự https://github.com/angular/angular/issues/12008 và https://github.com/angular/angular/issues/11405 – Bharat

Trả lời

3

Tôi đang tìm kiếm điều tương tự và cũng có tùy chọn để thực hiện dịch năng động mà không cần dịch ngx. ocombe dường như là một thiết bị linh hoạt cho i18n ở Góc. Trong vấn đề GitHub này #16477 ông đã đăng một số loại lộ trình cho i18n trong Angular.

▢ Sử dụng chuỗi dịch bên ngoài của một mẫu - #11405 [chặn bởi i18n runtime]

Như bạn có thể thấy tính năng này không được thực hiện trong góc được nêu ra nhưng đó là kế hoạch. Vấn đề đó là ngăn chặn tính năng này may mắn là cơ bản dở dang:

▢ Runtime i18n (một bó cho tất cả các miền địa phương với AOT) - [làm việc trên nó]

Tôi không nhớ nơi tôi đọc nó nhưng tôi nghĩ ocombe viết, họ muốn thực hiện tính năng này vẫn còn trong góc 5 để nó có thể có sẵn trước khi mùa xuân 2018 (các Angular roadmap nói kiễu góc 6 sẽ được công bố vào mùa xuân 2018)

Date: March/tháng 4 năm 2018 ; Ổn định phát hành: 6.0.0

ocombe chỉ gửi this hôm nay:

Tôi không phải là người làm việc trên tính năng này, và đó là những ngày nghỉ phá vỡ, tôi sẽ cho bạn biết càng sớm càng tôi biết nhiều

Vì vậy, tất cả những gì còn lại là sử dụng NGX-dịch nếu bạn không thể chờ đợi, hoặc bạn có thể đăng ký vào những vấn đề GitHub #11405 & #16477 và được cập nhật cho đến khi họ làm cho tính năng này có sẵn. Hy vọng rằng đầu năm 2018 :)

PS: theo như tôi hiểu họ cũng muốn triển khai bản dịch động, nhưng tôi nghĩ nó sẽ không có sẵn trước Angular 6.

UPDATE:

Bây giờ là chính thức: Runtime i18n sẽ không được trước góc 6 (xem: 11405#issuecomment-358449205)

EDIT:
Tôi tìm thấy một bẩn hack để làm điều đó. bạn có thể tạo thẻ div ẩn cho bản dịch của mình và lưu chúng qua ViewChildren trong bản đồ để sử dụng thêm. Bạn thậm chí có thể đăng ký các yếu tố để cập nhật chúng.

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

Bạn có thể theo dõi tiến trình của trình kết xuất đồ họa Ivy mới, điều này sẽ làm cho thời gian chạy i18n có sẵn tại đây: https://github.com/angular/angular/issues/21706 –

Các vấn đề liên quan