javascript - Translating data-bound text in Angular 2 with i18n

When I attempt to translate English to French using i18n everything works dandy when following the Internationalization tutorial at .html word for word.

But the moment I attempt to use Angular 2's data-binding to insert variable text into the HTML it quits working.

Here is my HTML:

<h1 i18n="User wele|An introduction header for this sample">{{value}}</h1>

Here is my ponent:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'appponent.html'
})
export class AppComponent { 
  public value = "Hello i18n!";
}

Here is my XLF file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
   <body>
     <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2"   datatype="html">
       <source>Hello i18n!</source>
       <target>Bonjour i18n!</target>
       <note priority="1" from="description">An introduction header for this sample</note>
       <note priority="1" from="meaning">User wele</note>
     </trans-unit>
   </body>
 </file>
</xliff>

Here is the error:

[email protected]:357 Error: Uncaught (in promise): Error: Template parse errors: Translation unavailable for message id="95184d0fe43359bff724d20df3a1317aef86799c" ("[ERROR ->]{{value}}

When I attempt to translate English to French using i18n everything works dandy when following the Internationalization tutorial at https://angular.io/docs/ts/latest/cookbook/i18n.html word for word.

But the moment I attempt to use Angular 2's data-binding to insert variable text into the HTML it quits working.

Here is my HTML:

<h1 i18n="User wele|An introduction header for this sample">{{value}}</h1>

Here is my ponent:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.ponent.html'
})
export class AppComponent { 
  public value = "Hello i18n!";
}

Here is my XLF file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
   <body>
     <trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2"   datatype="html">
       <source>Hello i18n!</source>
       <target>Bonjour i18n!</target>
       <note priority="1" from="description">An introduction header for this sample</note>
       <note priority="1" from="meaning">User wele</note>
     </trans-unit>
   </body>
 </file>
</xliff>

Here is the error:

[email protected]:357 Error: Uncaught (in promise): Error: Template parse errors: Translation unavailable for message id="95184d0fe43359bff724d20df3a1317aef86799c" ("[ERROR ->]{{value}}

Share Improve this question edited Dec 1, 2016 at 16:14 Mistalis 18.3k14 gold badges77 silver badges97 bronze badges asked Oct 27, 2016 at 15:17 ed-tester 1,6664 gold badges19 silver badges26 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

You cannot currently translate strings at run-time. It's pre-processed to deliver the translated strings in the html. It would be nice if Angular would provide a pipe to use the .xlf translations for bound string variables. Seems like a pretty big gap to me.

Here's a plunker to illustrate the problem.

Here is functional example of that what you are trying to achieve: plnkr link

Looks like you have to set up document locale, and a little bit extra code for fetching the proper localisation in app/i18n-providers.ts

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Translating data-bound text in Angular 2 with i18n - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)