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

Question

我这样使用 bootstrap 工具提示：

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

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

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);这最后一个returns翻译的很好但是没有更新html.

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

Answer 1

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

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

[title]="statut | displayMessage | translate"

如果你的displayMessagemethod/pipereturns一个翻译键，它会被翻译。

为清楚起见进行编辑

为 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 负责使用您的翻译键查找当前语言中的相应文本

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

How to translate the title of a tooltip with ngxTranslate

tooltip

ngx-translate

angular

为清楚起见进行编辑