如何使用 ngx Translate 翻译工具提示的标题答案

【问题标题】：How to translate the title of a tooltip with ngxTranslate如何使用 ngx Translate 翻译工具提示的标题
【发布时间】：2021-06-08 15:00:41
【问题描述】：

我像这样使用引导工具提示：

<em class="fas fa-hand-paper cursor-pointer" data-toggle="tooltip" data-placement="top" title="{{displayMessage(statut)}}" [attr.aria-label]="displayMessage(statut)"></em>

对于工具提示的标题，我使用了一个根据参数返回不同值的函数：

title="{{displayMessage(statut)}}"

和：

public tooltipMessage: string;


public displayMessage(value) {
 if (value != null) {
   this.translate
     .get(`TOOLTIP.ICON.${value}`)
     .subscribe((res: string) => {
       this.tooltipMessage = res
       return this.tooltipMessage;
     })
  }
console.log(this.tooltipMessage);
}

对于两种语言的翻译，我使用 ngx-translate。

问题：

当我切换到工具提示时，标题会根据语言显示，但当我更改翻译时，工具提示的标题不会重置，我必须重新加载页面才能显示翻译成正确语言的标题。

我尝试使用 ngx-translate 的“onLangChange”功能。

 public ngOnInit() {
  this.subscriptions.add(
   this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
    this.displayMessage(this.statut);
  })
 );
}

可惜没有成功

如果我控制console.log(this.tooltipMessage);，最令人惊讶的是，这最后一个可以很好地返回翻译但不更新html。

你有解决这个问题的办法吗？

【问题讨论】：

标签： angular tooltip ngx-translate

【解决方案1】：

使用 ngx-translate translatePipe 管道（并用管道替换您的 displayMessage(...) 方法）：

title="{{statut | displayMessage | translate}}" 或

[title]="statut | displayMessage | translate"

如果您的displayMessage 方法/管道返回翻译键，它将被翻译。

为清楚起见进行编辑

为displayMessage 创建一个管道

@Pipe({name:'displayMessage'})
export class DisplayMessagePipe {
  transform(value: string) {
    return value != null ? `TOOLTIP.ICON.${value}` : '';
  }
}

然后在模板中使用新创建的管道：

<em
  class="fas fa-hand-paper cursor-pointer"
  data-toggle="tooltip"
  data-placement="top"
  [title]="statut | displayMessage | translate"
  [attr.aria-label]="statut | displayMessage | translate">
</em>

ngx-translate 的TranslatePipe 负责使用您的翻译键来查找当前语言中的相应文本

【讨论】：