Angular 2 i18n：动态反馈

Question

I have an Angular 2 app that currently uses ng2-translate to manage multiple languages for the GUI. It's communicating with a API that responds to requests using a combination of HTTP status codes and custom API codes.

So I can for instance get this back on a HTTP call to it:

{
    success = true,
    code = 'A00001'
}

I have a document that explains what "A00001" means, so I know what translation to load.

Now, I want to make the switch to use Angular's own i18n solutions. Mainly because I want to use as few third-party libraries as possible, but most importantly because it offers better support on giving context to translations.

Looking at the documentation for i18n on angular.io , it looks pretty straight forward, but the only thing that's holding me back is how I am going to handle the responses from the API.

Since all strings are replaced/translated during compilation, how can I retreive a translated string and show it only when I detect a specific code from the API?

This is basically what I do now:

switch(response.code) {
    case 'A00001':
        feedback = this._translateService.instant('translationKey');
    break;
}

Then I present the feedback for the user in the GUI.

How would one solve this using Angulars i18n solution?

Answer 1

I've been trying to figure this out myself.

A) What a co-worker did was just translate all strings on the DOM and have a service get these elements' html content, set display none ofcourse.

B) As an alternative, you could have a switch case on your DOM for all the possible errors and show accordingly using *ngIf.

C) A combination of A and B, you can create this as a separate component + service. Which you can use anywhere you need the dynamic error messaging - this way your compiled view won't always contain the unnecessary translation.