Angular 7 ngx-translate 更改 运行 不刷新页面的时间转换

Question

注意：我已经厌倦了与此主题相关的所有问题和答案。

我想在更改语言下拉菜单时不刷新页面的情况下翻译 Typescript 变量值。

我正在尝试更改语言方面的数据更改。我在下拉值更改时成功更改为 HTML Bind: 值，但未更新 TypeScript Bind: 值。

我用ngx-translate

我引用了链接：但没有成功

components.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-translate',
  templateUrl: './translate.component.html',
  styleUrls: ['./translate.component.css']
})
export class TranslateComponent implements OnInit {
  typeScriptvalue: string;
  simpleProducts:any[]=[ {   
    name:'English',
    id:'en'
  },
  {   
    name:'French',
    id:'fr'
  }];

  constructor(private translate: TranslateService) {
    this.typeScriptvalue = this.translate.instant('HOME.TITLE');
   }

  ngOnInit(): void {
  }

  changeevent(e)
  {
    console.log(e);
    this.translate.use(e.value);

  }

}

component.html

 <label><b> HTML Bind</b></label> : <div>{{ 'HOME.TITLE' | translate }}</div> <br>
    <label><b>TypeScript Bind</b></label> : <div>{{ typeScriptvalue }}</div> <br>
    <label>
        Change language : <div class="dx-field-value">
            <dx-select-box  [dataSource]="simpleProducts" displayExpr="name" valueExpr="id" (onValueChanged)="changeevent($event)"></dx-select-box>
        </div>
    </label>

Answer 1

经过长时间的研究，我终于找到了最好的解决方案。

---

您可以在订阅者方法上重新分配 Typescript 变量。 use method

 changeevent(e)
  {
    console.log(e);
    this.translate.use(e.value).subscribe(data => {
      this.typeScriptvalue = this.translate.instant('Home.Title');      
    });

  }