translate - Angular 7 ngx-translate 在不刷新页面的情况下更改运行时转换

Question

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

我想在更改语言 Dropdown 时翻译 Typescript 变量值而不刷新页面。

我试图改变语言方面的数据变化。我成功更改HTML Bind:下拉值更改但不更新TypeScript Bind:值的值。

我使用ngx 翻译

我推荐链接：但没有成功

1. angular-ngx-translate-在打字稿中的用法
2. ngx-translate-in-ts-file-angular
3. ngx-translate-with-dynamic-text-on-ts-file

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 变量。 使用方法

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

  }