Angular 8 i18n translate Dynami c переменная - PullRequest
Новая
       7

Angular 8 i18n translate Dynami c переменная

0 голосов
/ 30 января 2020

В моем app.component.html есть элемент, который находится на каждой странице:

<h1 i18n="@@titleH1">{{title}}</h1>

У меня есть общий сервис с сеттерами и геттерами: 

...
title = new BehaviorSubject('Initial Title');

setTitle(title: string) {
this.title.next(title);
}
...

app.component.ts: ngOnInit

...
this.sharedService.title.subscribe(updateTitle => this.title = updateTitle);
this.sharedService.setTitle('Dashboard');
...`

product.component.ts: ngOnInit 

...
this.sharedService.title.subscribe(updateTitle => this.title = updateTitle);
this.sharedService.setTitle('Product');
...

При переходе к / dashboard я получаю Dashboard, когда при переходе к / product я получаю Product в отличном состоянии.

Как я могу перевести Dashboard and Product Dinamically, так как {{title}} будет меняться в соответствии с на страницу.

my xlf произвел это: 

     ... 
     <trans-unit id="titleH1" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{title}}"/></source>
        <target><x id="INTERPOLATION" equiv-text="{{title}}"/></target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">17</context>
        </context-group>
      </trans-unit>
      ...

, и я добавил целевой тег, но не уверен, как это вписывается в перевод.

Любые идеи. Спасибо

1 Ответ

0 голосов
/ 12 февраля 2020

Имеется Angular 9 с новым $ localize, который позволяет делать так.

app.component. html: 

<h1>{{title}}</h1>

app.component.ts: 

...
title = $localize`:@@dashboard:Dashboard`;
...
this.sharedService.setTitle(this.title);

product.component.ts: 

...
title = $localize`:@@product:Product`;
...
this.sharedService.setTitle(this.title);

messages.xlf : 

<trans-unit id="dashboard">
  <source>Dashboard</source>
  <target>Translation here</target>
</trans-unit>
<trans-unit id="product">
  <source>Product</source>
  <target>Translation here</target>
</trans-unit>

Nice @ Angular team!

...