css - Angular 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" />

这将显示一个非常好的引导工具提示，如下所示：

使用 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");
    });
  }

好吧，我被困住了。我需要能够通过翻译显示这个漂亮的工具提示。任何帮助/想法？

谢谢。

标签： cssangularhtmlbootstrap-4tooltip

Answer 1

好的，经过长时间的调查，我找到了解决方案，我会在这里发布，以防它帮助其他人。

问题是我在 onInit 中设置了工具提示（仅在创建组件时触发一次）并且没有设置任何工具提示文本，只是让它拾取一组：

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

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

    $('.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- 作为隐式输入参数）充当绑定，它不断更新标题属性，因此当占位符文本更改时（占位符在语言更改后不需要刷新，这就是它起作用的原因）工具提示“标题”属性将被更新，因此工具提示文本将更改，用户将看到更新的文本。

“结束” ：）