angular6 - 在 Angular Typescript 代码中翻译字符串

Question

是否可以在 Angular6 组件的源代码中翻译字符串。

F.e.

window.confirm("HELP me");

除了 HTML 文件的正常翻译（ Angular Docs i18n）之外，我没有找到任何东西。

先感谢您

Answer 1

您可以使用https://github.com/ngx-translate/i18n-polyfill直到 Angular i18n 获得对它的内置支持，可能在版本 9 左右。作者正在研究 Angular i18n，所以我认为信任是安全的他期望它将接近 Angular i18n 的未来功能。

本期有很多关于 Angular i18n 未来的有趣信息：https ://github.com/angular/angular/issues/16477

Answer 2

我已经为此尝试了一个解决方案并且它有效，这就是我如何管理它来翻译在我的 ts 文件中调用的 ngx-toaster 警报，例如我有这个：

ngOnInit() {
 this.toastrService.success('created successfully', '');
}

我把它转换成这个

@ViewChild('test') myDivElementRef: ElementRef;
...
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.success(this.myDivElementRef.nativeElement.outerHTML, '', {
  enableHtml :  true
});

在我的模板中，我创建了一个带有#test 参考的 div

<h2 i18n="@@testTitle" #test [hidden]="true">created successfully</h2>

Answer 3

在材料角 6 中：

import { locale as english } from './i19n/en';
import { locale as français } from './i19n/fr';
import { ToastrManager } from 'ng6-toastr-notifications';

宣言

     @ViewChild('espiontest') myDivElementRef: ElementRef;

在构造函数中

    constructor(
      public toastr: ToastrManager){
    }

在您的功能中或OnInt

    this.toastr.successToastr(this.myDivElementRef.nativeElement.outerHTML, null, {enableHTML: true});

在 html 中，这个元素{{'Add_Profil_application_lang.Creationeffectuée' | translate}}是文件中的翻译./i19n/en和./i19n/fr

<pre>
<p [hidden]="true">
   <span #espiontest>{{'Add_Profil_application_lang.Creationeffectuée' | translate}} 
</span>
</p>
</pre>