角度6：ngx-translate无法与工具提示的data-title属性一起使用

Question

我正在开发一个使用ngx-translate进行本地化的Angular 6应用程序，我还使用了Bootstrap 4工具提示，而我面临的问题是我无法使用本地化保持Bootstrap工具提示样式。

没有本地化，我将以这种方式使用输入：

<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />

这将显示一个非常不错的Bootstrap工具提示，如下所示：

对于ngx-translate本地化，我将以这种方式使用输入：

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position" 
    [attr.placeholder]="'wfrh_vacancyform_position' | translate" 
    [attr.data-title]="'wfrh_vacancyform_position' | translate" />

，这里的问题是data-title属性。 “ data-title”属性用于显示工具提示，但我想ngx-translate无法识别它（也许？）。

占位符可以通过这种方式正常工作（文本已正确翻译和显示），但工具提示不会显示。

我也尝试过这种方式：

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
placeholder="{{'wfrh_vacancyform_position' | translate}}" 
data-title="{{'wfrh_vacancyform_position' | translate}}" />

这也不起作用（仅适用于占位符），所以我被卡住了。

如果我这样做：

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position" 
    [attr.placeholder]="'wfrh_vacancyform_position' | translate" 
    [attr.title]="'wfrh_vacancyform_position' | translate" />

然后显示工具提示，但没有样式，如在下一张图片中所示：

这是我在代码中创建工具提示的方式（在ngOnInit中）：

ngOnInit() {
   setTooltip()
}

  setTooltip() {

    $('.tooltipped').tooltip({
      placement: 'auto',
      trigger: 'focus',
      template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>'
    });

    $('.tooltipped').bind("mouseover", function () {
      var _this = $(this);
      _this.tooltip("show");
    });

    $('.tooltipped').bind("mouseout", function () {
      var _this = $(this);
      _this.tooltip("hide");
    });

    $('.tooltipped').bind("keyup", function () {
      var _this = $(this);
      _this.tooltip("hide");
    });
  }

好吧，我被困住了。我需要能够显示带有翻译的漂亮样式的工具提示。有帮助/想法吗？

谢谢。

Answer 1

好吧，经过长时间的研究，我找到了解决方案，并将其发布在这里，以防其他人受益。

问题是我在onInit中设置了工具提示（在创建组件时仅触发一次），并且没有设置任何工具提示文本，只是将其保留为以下内容：

[attr.data-title]="'text_to_translate_key' | translate"

（初始文本翻译），并且在更改语言后工具提示没有刷新（带有初始值的文本是静态的），但是您可以通过以下方式使用带有工具提示“ title”属性的函数：

    $('.tooltipped').tooltip({
      placement: 'auto',
      trigger: 'focus',
      template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>',
      title: this.setTitle
    });

  setTitle() {

    return $(this).attr("placeholder");
  }

，此函数（具有当前对象引用-this-作为隐式输入参数）用作绑定，该绑定连续更新title属性，因此当占位符文本更改时（无需在语言更改后刷新占位符，这就是为什么）它可以正常工作），工具提示的“ title”属性将被更新，结果工具提示文本将发生变化，用户将看到更新的文本。

“结局”：）