[英]Angular 8 i18n translate dynamic variable
I have in my app.component.html
an element that is on every page:我的
app.component.html
每个页面app.component.html
一个元素:
<h1 i18n="@@titleH1">{{title}}</h1>
I have a shared service that has a setters and getters:我有一个具有 setter 和 getter 的共享服务:
...
title = new BehaviorSubject('Initial Title');
setTitle(title: string) {
this.title.next(title);
}
...
app.component.ts: ngOnInit
app.component.ts:
ngOnInit
...
this.sharedService.title.subscribe(updateTitle => this.title = updateTitle);
this.sharedService.setTitle('Dashboard');
...`
product.component.ts: ngOnInit
product.component.ts:
ngOnInit
...
this.sharedService.title.subscribe(updateTitle => this.title = updateTitle);
this.sharedService.setTitle('Product');
...
When navigate to /dashboard I get Dashboard in the when I navigate to /product I get Product in the which is cool.当导航到 /dashboard 时,我会在 Dashboard 中找到,当我导航到 /product 时,我会在其中获得很酷的 Product。
How can I translate Dashboard and Product Dinamically as {{title}} will change according to the page.我如何以动态方式翻译仪表板和产品,因为 {{title}} 会根据页面而变化。
my xlf
produced this:我的
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>
...
and I added the target tag but not sure how this fit into translation.我添加了目标标签,但不确定这如何适合翻译。
Any Ideas.有任何想法吗。 Thanks
谢谢
There is Angular 9 with the new $localize which makes it possible to do like so. Angular 9 带有新的 $localize,这使得这样做成为可能。
app.component.html: app.component.html:
<h1>{{title}}</h1>
app.component.ts: app.component.ts:
...
title = $localize`:@@dashboard:Dashboard`;
...
this.sharedService.setTitle(this.title);
product.component.ts: product.component.ts:
...
title = $localize`:@@product:Product`;
...
this.sharedService.setTitle(this.title);
messages.xlf:消息.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!不错的@Angular 团队!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.