我在 Svelte 中创建了一个页面。我提供了两种语言的翻译,效果很好。现在,我希望更改每个页面上的标题,而且我希望将其翻译成页面的当前语言。我尝试过双向绑定(bind),但我认为我做错了。最小示例:
//../components/meta-title.svelte
<svelte:head>
<title>{title}</title>
</svelte:head>
<script>
export let title = "default title for page"
</script>
//../pages/_layout.svelte
<Meta bind:title={$_('title.companyTitle')} /> //doesn't work
<Navigation items={items}/>
<div>
<slot/>
</div>
<Footer contact={contact}/>
//../pages/company.svelte
<LeadSection classes="lg:flex-row-reverse -mt-24">
<div slot="header">
{ $_('pages.company.header') }
</div>
...
</LeadSection>
有什么想法可以做到这一点吗?
最佳答案
我的理解是:你想要动态设置标题。要实现此目的,您不必使用双向绑定(bind)。双向绑定(bind)意味着写回到父组件中的变量。您尝试绑定(bind)的“变量”不是变量,而是不能用于绑定(bind)的存储。只需将标题作为普 channel 具传递即可,它应该可以工作:
//../components/meta-title.svelte
<svelte:head>
<title>{title}</title>
</svelte:head>
<script>
export let title = "default title for page"
</script>
//../pages/_layout.svelte
<Meta title="This is a dynamic title" />
...
关于html - 动态更改翻译后的页面标题 - Svelte,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66549276/