用 Svelte 制作的语言切换器不起作用答案

【问题标题】：Language Switcher made in Svelte not working用 Svelte 制作的语言切换器不起作用
【发布时间】：2021-07-09 15:02:06
【问题描述】：

我目前正在学习 svelte 3，我想做一个项目，打算用英语在 github 上发布，但我有朋友不会说英语，所以我尝试制作一个语言切换器。

这是我的尝试：

<script lang="typescript">
  var selectedLang = "en_us";
  const _lang_filename = "./lang/%.json".replace("%", selectedLang);
  import lang from _lang_filename;
</script>

<div id="_app_">
  <h1>{lang.welcome}</h1>

  <button
    on:click={() => {
      selectedLang = "pt_br";
    }}>Português (Brasil)</button
  >
  <button
    on:click={() => {
      selectedLang = "en_us";
    }}>English (United States)</button
  >
</div>

关于 lang 文件的导入，当我放置一个变量时它给出了一个错误：Unexpected Token，我试图将 string.replace() 放在导入本身上，但它也不起作用。

【问题讨论】：

为什么不导入两个文件并用 if 语句在它们之间切换？

标签： javascript typescript svelte-3

【解决方案1】：

您遇到的第一个问题是对 Svelte 的工作原理存在误解。

与其他框架不同，<script> 和</script> 之间的部分只执行一次。这意味着无论您多久按下该按钮，lang_filename 都将永远改变。为了告诉编译器一个变量依赖于另一个变量，您必须使用$: 将其标记为反应式。

let selectedLang = "en_us";
$: _lang_filename = "./lang/%.json".replace("%", selectedLang);

现在_lang_filename 将在selectedLang 更改时更新。

（注意：我会在这里使用模板文字）

$: _lang_filename = `./lang/${selectedLang}.json`

现在您有了正确的文件名，我们必须加载实际文件。为此，您可以执行动态 import，但 html 规范拒绝以这种方式导入除 javascript 文件之外的任何内容。

但是，您可以通过使用 fetch 来获取文件来解决此问题。所以现在你必须声明一个变量lang 来保存你的语言对象，并声明一个加载器函数来加载它。

let lang = {}
function load(filename) {
  lang = await fetch(filename).then(res => res.json())
}

剩下的就是告诉 Svelte 在文件名更改时重新运行load，这可以通过使用响应性再次实现：

$: load(filename)

我们当然可以在这里传入selectedLang，然后在load函数中构造路径。

为了完整起见，这里将是整个脚本：

<script>
    let selectedLang = "en_us";
    let lang = {}

    $: loadLanguage(selectedLang)

    async function loadLanguage() {
        lang = await fetch(`./lang/${selectedLang}.json`).then(res => res.json())
    }
</script>

需要注意的是，起初lang 将是一个完全空的对象，这会让人觉得到处都有undefined。

【讨论】：