Question

我正在尝试动态更改日期选择器的语言。为此，我必须更改数据选项的locale值。我的计划是每当变量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

在模板中似乎很难做到。另一种方法是在代码中定义getter属性：

currentLang = "en-US";

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

并使用attribute binding设置属性：

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

有关演示，请参见this stackblitz。

请注意，如果您更喜欢以这种方式生成字符串，则属性绑定也可以用于通过JSON.stringify(obj)获得的字符串。

Answer 2

不确定这是否满足您的要求，但是怎么样？

带有模板文字

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 3

您可以在组件的TypeScript中声明一个JSON对象，并将其绑定到HTML中。

如何在模板字符串中转义引号和大括号

3 个答案: