时间戳

首页 > 解决方案 > Svelte 条件组件渲染

svelte - Svelte 条件组件渲染

问题描述

我在应用程序中有一个基本的 if/else 来显示预加载器或组件。

{#if preloading}
    <video />
{:else}
    <svelte:component this={component} on:preload={preload}/>
{/if}

它从正确显示组件开始，当设置了预加载标志时，它会显示视频，但它会在 svelte:component 上显示它而不是替换它。

我尝试使用 {#key} 通过使用数字作为 id 并在设置预加载时增加它来强制重新渲染，但组件仍然存在。

有任何想法吗？

标签： svelte

解决方案

尝试像在示例页面中那样做：

<script>
  import video from "./somewhere.svelte"
  import component from "./somewhereelse.svelte" 
</script>

<svelte:component this={preloading ? video : component} on:preload={preload}/>

推荐阅读