Angular 更新ng2翻译指令中的翻译图

给定一个翻译字符串，例如：

"TIMEOUT": "Timeout in {{value}} seconds."

是否可以绑定

值

，以便在基础参数更改时触发

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

从'@angular/core'导入{Component}；
从“ng2翻译/ng2翻译”导入{TranslateService}；
@组成部分({
模板：`超时
{{倒计时}
{{message}}`
})
导出类超时组件{
倒计时：数字=10；
消息：字符串；
构造函数（私有translationService:TranslateService）{
让intervalId=setInterval（（）=>{
这是倒计时；
if（this.countdown this.message=结果）；
}, 500);
}
}

上面的组件将在10秒内显示超时。静态显示，但第二个跨度（和控制台）将显示您预期的递减值

我解决这个问题的方法（如上所示）是使用

TranslationService

在间隔的每个刻度上提取翻译的字符串，并更新模板中组件的绑定

message

属性