问题描述
我看到angular2为其组件实现了i18n，并且通过使用i18n(及其所有相关属性，例如i18n-title，复数等)，您可以将html模板国际化.
I saw that angular2 implements i18n for its components and that by using i18n (and all its related attributes like i18n-title, plurals etc ...) you can internationalize your html templates.
但是我想知道如何将您的打字稿代码提供的字符串国际化.例如，我有一个弹出窗口，根据后端弹出的错误，我在其中弹出不同的消息.该消息是通过绑定到模板的变量提供的，而我没有找到使用angular2国际化的方法来翻译该文本的方法.
But i was wondering how can you internationalize strings that are provided by your typescript code. For example i have a popup where depending on the error that is throw by my backend i print in it a different message. That message is provided by a variable binding to my template and i did not found a way with angular2 internationalization to translate that text.
更好理解的简单示例:
typescript:
errorMessage: string = '';
private errorMapping: Map<number,String>;
onError(error): void {
this.errorMessage = errorMapping.get(error.code);
}
template:
<pop-up>{{errorMessage}}</pop-up>
有办法吗?
如果我不是以一种糟糕的方式实现它的人?我应该采取其他方式吗?
If not am I the one implementing it in a bad way ? Should i do it differently ?
非常感谢您的时间和回答.
Thank you very much for your time and answers.
推荐答案
这是一个老问题，但是Angular 5仍然不提供对此的支持，并且像原始提问者一样，我也试图避免使用第三方库，我的解决方法如下...
This is an old question, but Angular 5 still does not provide support for this, and like the original questioner I am also trying to avoid using 3rd party libraries, my workaround was as follows...
- 定义一个名为TranslationsService的服务类，该类具有一个公共方法来接受翻译的键值映射，以及另一个公共方法来检索给定键的翻译.
-
在输入页面html中，即
app.component.html，为您希望在应用程序中的任何位置以编程方式访问的每种翻译添加<span>，即...
- Define a service class called TranslationsService which has a public method to accept a key-value Map of translations, and another public method to retrieve a translation for a given key.
In your entry page html, ie
app.component.html, add a<span>for each translation that you may wish to access programatically anywhere in your application, ie...
<span class="translation" #error_1200 i18n="@@error_1200">A Message already exists with this Name</span>
在您的app.component.css中，添加以下内容，以使上面定义的静态翻译列表实际上不会在条目中的浏览器中显示
In your app.component.css, add the following so that your static list of translations as defined above is not actually shown in the browser on entry
.translation {display: none;}
使用Angular的本机i18n支持以通常的方式为您在上面定义的跨度定义所需的翻译，就像对应用程序中任何html文件中的任何可翻译文本一样.
Use Angular's native i18n support to define the required translations for the spans you defined above in the normal way that you would do for any translatable text in any html file in your application.
在您的app.component.ts中，您可以绑定到您在html中定义的翻译，从它们中获取文本，并建立可以传递到您的翻译服务的翻译地图.由于此操作是在输入组件中完成的，因此可以从应用程序中需要访问这些转换之一的任何组件中使用.代码如下:
In your app.component.ts you can bind to the translations that you defined in the html, get the text from them and build up a Map of translations that can be passed to your Translations service. Since this is done in the entry component, it will be then be available from any components in your application that need to access one of these translations. Code as below:
@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);
}
}
您应用中的任何组件都需要其中一种翻译，只需注入您的翻译服务，并使用相应的键即可使用它检索您需要的内容
Whichever components in your app require one of these translations, just inject your Translations service and use it to retrieve what you need using the appropriate key
这篇关于打字稿中的Angular 2和i18n的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！