css - Angular 6 : ngx-translate not working with data-title attribute for tooltips

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”属性用于显示工具提示，但我猜 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- 作为隐式输入参数)充当绑定(bind)，它会连续更新 title 属性，因此当占位符文本更改时(占位符不需要在语言更改后刷新，这就是原因它有效)工具提示“title”属性将更新，因此工具提示文本将更改，用户将看到更新的文本。

“结束”:)