Angular 8 i18n 翻译动态变量

Question

我有我的 app.component.html每个页面上的元素:

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

我有一个包含 setter 和 getter 的共享服务:

...
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 时，我会在导航到/product 时得到 Dashboard，这很酷。

如何动态翻译 Dashboard 和 Product，因为 {{title}} 会根据页面变化。

我的 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>
      ...

我添加了目标标签，但不确定它如何适合翻译。

任何想法。谢谢

Answer 1

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);

消息.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>

很棒的@Angular 团队!