如何用ngxTranslate翻译工具提示的标题

Question

我使用引导工具提示如下：

<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-翻译两种语言。

问题

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

我试过使用ngx翻译的"onLangChange“功能。

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

但不幸的是没有成功

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

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

Answer 1

使用ngx-转换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负责使用翻译键查找当前lang中的相应文本。