打字稿中的Angular 2和i18n

Question

我看到angular2为其组件实现了i18n，并且通过使用i18n（及其所有相关属性，如i18n-title，复数等...），您可以将您的html模板国际化。

但我想知道如何将打字稿代码提供的字符串国际化。例如，我有一个弹出窗口，根据我的后端抛出的错误，我在其中打印一个不同的消息。该消息由绑定到我的模板的变量提供，我没有找到使用angular2国际化来翻译该文本的方法。

更好理解的简单示例：

 typescript:
 errorMessage: string = '';
 private errorMapping: Map<number,String>;

 onError(error): void {
   this.errorMessage = errorMapping.get(error.code);
 }

 template:
 <pop-up>{{errorMessage}}</pop-up>

有办法吗？

如果不是我是一个以糟糕的方式实施它的人？我应该采用不同的方式吗？

非常感谢你的时间和答案。

Answer 1

这是一个老问题，但Angular 5仍然没有为此提供支持，并且像原始提问者一样，我也试图避免使用第三方库，我的解决方法如下......

1. 定义一个名为TranslationsService的服务类，它具有一个公共方法来接受一个键值的翻译映射，另一个公共方法来检索给定键的翻译。
2. 在您的输入页面html，即app.component.html中，为您希望在应用程序的任何位置以编程方式访问的每个翻译添加一个<span>，即... <span class="translation" #error_1200 i18n="@@error_1200">A Message already exists with this Name</span>
3. 在您的app.component.css中，添加以下内容，以便在输入时实际显示上面定义的静态翻译列表 .translation {display: none;}
4. 使用Angular的本机i18n支持为您在上面定义的跨度定义所需的翻译，以正常方式为应用程序中任何html文件中的任何可翻译文本进行定义。
5. 在您的app.component.ts中，您可以绑定到您在html中定义的翻译，从中获取文本并构建可以传递到Translations服务的翻译地图。由于这是在入口组件中完成的，因此可以从应用程序中需要访问其中一个转换的任何组件中获取它。代码如下：

   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     @ViewChild('error_1200') error1200 : ElementRef;
   
     constructor(private translationsService: TranslationsService) { }
   
     ngOnInit() {
       let translations = new Map<string, string>();
       translations.set('error_1200', 
           this.error1200.nativeElement.textContent);
       this.translationsService.setTranslations(translations);
     }
   }

6. 您的应用中的哪个组件需要其中一个翻译，只需注入您的翻译服务并使用它来使用适当的密钥检索您需要的内容