Svelte在svelte:head中的<script>替换

Question

我正在使用Svelte创建个人网站。我想在最终的HTML代码中，基于Svelte组件，在头部放置一段JavaScript代码。因此，我的代码看起来像这样：

<svetle:head>
    <script> var url = "myurl.com/"; </script>
<svetle:head>

在[slug].svelte文件中，我想要在脚本中替换传递给该组件的prop值。我尝试了以下方法：

<svetle:head>
    <script> var url = "myurl.com/{post.slug}"; </script>
<svetle:head>

很不幸，这并不会起作用。如果替换 {post.slug} 发生在 <script> 之外的位置，Svelte 将会很好地进行替换，并将生成的 HTML 传递给客户端。然而，因为它在 <script> 中，Svelte 似乎认为我一定要字面意义上使用 "myurl.com/{post.slug}"，而不是 "myurl.com/my-post-name"。我认为这可能是因为 {} 在 JavaScript 中有意义。

请注意，我已经尝试过每种组合："myurl.com/{post.slug}"，"myurl.com/"{post.slug}，myurl.com/${post.slug}。在 <script> 中放置 {post.slug} 的任何位置都不会进行替换。

如何在 Svelte 执行组件中的每个其他替换时执行此替换？我无法想象没有办法做到这一点，但是 Svelte 文档似乎没有涉及到这个问题。

- user395788

---

你试过使用 \myurl.com/${post.slug}`` 吗？它被称为 模板字面量。 - undefined

是的，我确实尝试过那个方法。看起来在Svelte中没有办法做到这一点。最后我找到了一个不同的解决方法。 - undefined

如果您已经完成，请将其发布为答案，以便其他人受益。 - undefined

Answer 1

看起来你可以通过@svelte函数的html参数注入你的脚本。

<script lang="ts">
    const postSlug: string = "...";
</script>

<svelte:head>

    {@html `<script>
        var url = "${postSlug}";
    </script>`}

</svelte:head>

缺点是整个<script/>块都需要作为字符串呈现，这将使管理更大的JS逻辑变得困难。但是，在将环境变量注入简单的<script/>块时，它对我的情况有效。

- cevaris

Answer 2

如果您需要的值是文本字符串，您可以将其放在<meta>标签中，然后选择它。这有点不太好，但是可以实现。

<svelte:head>
  <meta name="myVar" content={post.slug} />
  <script>
    var url = document.querySelector('meta[name=myVar]')
    console.log(url.getAttribute('content'))
  </script>
</svelte:head>

然而，我怀疑可能有一种更好的方法来避免这样的解决方法，如果了解代码如何使用变量，将有助于提供更好的答案。

- Joshua Collinsworth