Question

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

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

更好的未成年人的快速示例：

i18n

有办法吗？

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

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

Answer 1

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

定义一个名为TranslationsService的服务类，它有一个公共方法来接受一个键值的翻译映射，另一个公共方法来检索给定键的翻译。
在您的输入页面html中，即app.component.html，为您希望在应用程序的任何位置以编程方式访问的每个翻译添加<span>，即...

<span class="translation" #error_1200 i18n="@@error_1200">A Message already exists with this Name</span>
在您的app.component.css中，添加以下内容，以便上面定义的静态翻译列表实际上不会在条目中显示在浏览器中

.translation {display: none;}
使用Angular的本机i18n支持，以您在应用程序的任何html文件中为任何html文件中的任何可翻译文本的正常方式定义上面定义的跨度所需的翻译。

在app.component.ts中，您可以绑定到您在html中定义的翻译，从中获取文本并构建可以传递到翻译服务的翻译地图。由于这是在入口组件中完成的，因此可以从应用程序中需要访问其中一个转换的任何组件中获取它。代码如下：

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

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

打字稿中的Angular 2和i18n

1 个答案: