翻译工作但仅在页面刷新后答案

【问题标题】：Translation working but only after page resresh翻译工作但仅在页面刷新后
【发布时间】：2021-07-27 08:16:03
【问题描述】：

我的ts代码：

isEditing = '';
ngOnInit () {
this.isEditing = this.translateService.instant('OneWord.Add');
}

我的html：

<button> {{isEditing}} </button>

翻译服务正在工作，但仅在用户刷新页面时。使用 html 文件，所有内容都会在更改语言后立即翻译。我怎样才能使这个行为相同？

【问题讨论】：

不知道自己在做什么很难说。处理 i18n 有多种方法，您甚至不说您使用的是哪一种。请在 stackblitz 上对您的问题进行最小限度的复制。

标签： angular translation

【解决方案1】：

您也可以在 html 文件中使用翻译。

<span [translate]="'OneWord.Add'"></span>

如果您需要将字符串传递给组件，您可以使用以下内容

<app-mycustomcomponent title="{{'OneWord.Add' | translate}}"></app-mycustomcomponent>

或者如果您使用可观察对象：

isEditing: Observable<string>;
ngOnInit () {
    this.isEditing = this.translateService.get('OneWord.Add');
}

<span>{{isEditing | async}}</span>

注意instant:https://github.com/ngx-translate/core#methods的文档

【讨论】：

我添加了更多代码，我尝试过使用 observable，但效果不佳。我在按钮上有 [object Object]

【解决方案2】：

ngOnInit() 仅在最初创建组件时调用。您可以按如下方式收听更新：

ngOnInit() {
  this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
    this.isEditing = this.translateService.instant('OneWord.Add');
  });
}

【讨论】：

工作，但只有在我更改语言之后，在此之前我有空按钮
如果我刷新页面我也有空按钮
然后你可以利用rxjs的startWith来初始触发。 this.translateService.onLangChange.pipe(startWith(undefined)).subscribe[...] 或者你可以复制this.isEditing = [...] 行，但是你必须记住在两个地方都更新它。但是如果可以的话，我会把它翻译成html。