Как избежать кавычек и фигурных скобок в строке шаблона

Question

Я пытаюсь изменить язык выбора даты динамически.Для этого мне нужно изменить значение locale data-options.Мой план состоит в том, чтобы использовать шаблонную строку для ее изменения всякий раз, когда изменяется переменная currentLang.Проблема в том, что я не могу экранировать строку должным образом.

В настоящее время она выглядит так:

<div class="flatpickr" data-init="auto" data-options=`{"enableTime": true, "locale" : "${currentLang}", "dateFormat" : "Y-m-d H:i:S" }`>

В конце я хочу, чтобы строка выглядела следующим образом:

data-options='{"enableTime": true, "locale": "en", "dateFormat": "Y-m-d H:i:S"}'

Этого вообще можно достичь?

Answer 1

Не уверен, что это соответствует вашим требованиям или нет, но как насчет этого?

С литералом шаблона

let el = document.querySelector('div');
let currentLang = 'en';
el.setAttribute('data-options', `{"enableTime": true, "locale" : ${currentLang}, "dateFormat" : "Y-m-d H:i:S"}`);
console.log(el);

<div class="flatpickr" data-init="auto">

ИЛИ с JSON.stringify()

let el = document.querySelector('div');
let currentLang = 'en';
let options = {
  "enableTime": true,
  "local": currentLang,
  "dateFormat": "Y-m-d H:i:S"
}
el.setAttribute('data-options', JSON.stringify(options));
console.log(el);

<div class="flatpickr" data-init="auto">

Answer 2

Кажется, что это трудно сделать в шаблоне.Альтернативой является определение свойства получателя в коде:

currentLang = "en-US";

get options(): string {
  return `{"enableTime": true, "locale": "${this.currentLang}", "dateFormat": "Y-m-d H:i:S"}`;
}

и установка атрибута с привязкой атрибута :

<div class="flatpickr" data-init="auto" [attr.data-options]="options"></div>

См. this stackblitz для демонстрации.

Обратите внимание, что привязка атрибутов также может использоваться для строки, полученной с помощью JSON.stringify(obj), если вы предпочитаете генерировать строку таким образом.

Answer 3

Вы можете объявить объект JSON в TypeScript вашего компонента и связать его в своем HTML.