给定一个翻译字符串,例如:
"TIMEOUT": "Timeout in {{value}} seconds."
是否有可能以value
这样的方式绑定,ng2-translate
当底层参数发生变化时它会触发更新翻译的字符串?
import { Component } from '@angular/core';
import { TranslateService } from 'ng2-translate/ng2-translate';
@Component({
template: `<span translate [translateParams]="{ value: countdown }">TIMEOUT</span>
<span>{{ countdown }}</span>
<span>{{ message }}</span>`
})
export class TimeoutComponent {
countdown: number = 10;
message: string;
constructor(private translationService: TranslateService) {
let intervalId = setInterval(() => {
this.countdown--;
if (this.countdown <= 0) { clearInterval(intervalId); }
console.log(this.countdown);
this.translationService.get('TIMEOUT', { value: this.countdown }).subscribe((result) => this.message = result);
}, 500);
}
}
上面的组件将Timeout in 10 seconds.
静态显示,但第二个跨度(和控制台)将显示值递减,如您所料。
我解决这个问题的方法(如上所示)是使用TranslationService
来在间隔的每个刻度上获取翻译的字符串,并更新message
模板内组件上的绑定属性。