Угловой 6: ngx-translate не работает с атрибутом title-data для всплывающих подсказок - PullRequest
Новая
       19

Угловой 6: ngx-translate не работает с атрибутом title-data для всплывающих подсказок

0 голосов
/ 27 сентября 2018

Я разрабатываю приложение Angular 6, которое использует ngx-translate для локализации, и я также использую всплывающие подсказки Bootstrap 4, и проблема, с которой я сталкиваюсь, заключается в том, что я не могу использовать локализацию, сохраняя стиль всплывающей подсказки Bootstrap.

Без локализации я бы использовал следующие данные: 

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

И это покажет очень приятную подсказку Bootstrap, как показано ниже:

Input with styled tooltip

При локализации 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" />

, то всплывающая подсказка отображается, но без стиля, как это видно на следующем изображении:

Input with default tooltip

И вот как я создаю подсказки в коде (в 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");
    });
  }

Ну, я застрял.Мне нужно отобразить эту красивую подсказку с переводом.Любая помощь / идеи?

Спасибо.

1 Ответ

0 голосов
/ 28 сентября 2018

Хорошо, после долгого исследования я смог найти решение, и я опубликую его здесь на случай, если оно кому-нибудь поможет.

Проблема в том, что я установил подсказку в 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- в качестве неявного вводапараметр) действует как привязка, которая непрерывно обновляет свойство заголовка, поэтому при изменении текста заполнителя (заполнитель не требуется обновлять после изменения языка, и именно поэтому он работает) свойство «заголовка» всплывающей подсказки будет обновлено и, как следствие, текст всплывающей подсказки будетизменить и пользователь увидит обновленный текст.

"Конец":)

...