用 Svelte 制作的語言切換器不起作用

Question

我目前正在學習 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() 放在導入本身上，但它也不起作用。

Answer 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來保存你的語言 object 和一個加載器 function 來加載它。

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

剩下的就是告訴 Svelte 在文件名更改時重新運行load ，這再次可以通過使用響應性來實現：

$: load(filename)

當然，我們可以在這里傳入selectedLang並在負載 function 中構建路徑。

為了完整起見，這里將是整個腳本：

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

    $: loadLanguage(selectedLang)

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

但需要注意的重要一點是，起初lang將是一個完全空的 object，這將給出一個 flash 到處都undefined 。