Sapper/Svelte - 需要 @html 包含的内容来调用组件

Question

我正在使用sapper 构建一个站点，该站点对单个博客条目使用[slug].svelte 约定。博客内容来自（模拟）数据库，并包含 html。

html 包含在底部，如下所示：

...
<div class="content">
  {@html post.html}
</div>
...

一切都很好，它使 html 变得很漂亮。

但是，请考虑以下事项：

在[slug].svelte 文件中：

import AComponent from '../../components/AComponent.svelte'

并且，在包含的 html 里面渲染了{@html post.html}：

<p>yada yada yada</p>
<AComponent prop="data" />
<p>More yada yada yada...</p>

AComponent 不会被实例化或调用。

有没有办法做到这一点？还是我在尝试做一些不可能的事情？

（我知道组件没问题 - 它已在另一个包含完整 html 的文件中进行了测试。）

感谢

Answer 1

我不相信单独使用 @html 指令是不可能的。

来自the docs：

表达式应该是有效的独立 HTML — {@html "<div>"}content{@html "</div>"} 无效，因为它不是有效的 HTML。

由于<AComponent prop="data" /> 是一个 Svelte 组件而不是独立的 HTML，因此在使用 @html 时它不会实例化自己。

但是，您可以使用<svelte:component> 组合一个解决方案，从字符串内容动态呈现组件。

这是Svelte REPL 中的快速概念证明。有很多边缘情况未被发现，但它表明这是可能的。我也粘贴了下面的代码。

<script>
    import ComponentA from './ComponentA.svelte';
    import ComponentB from './ComponentB.svelte';
    
    let raw = `<p>yada yada yada</p>
<ComponentA name="testing" />
<p>More yada yada yada...</p>`;
    
    $: rawLines = raw.split('\n');
    
    function getComponent(line) {
        const componentName = line.split(' ')[0].substring(1);
        switch (componentName) {
            case 'ComponentA':
                return ComponentA;
            case 'ComponentB':
                return ComponentB;
        }
        return null;
    }
    
    function getComponentProps(line) {
        const props = line.split(' ').slice(1, -1);
        const kvPairs = props.map(p => p.replaceAll('"', '').split('='));
        return Object.fromEntries(kvPairs);
    }
</script>

<textarea bind:value={raw} />
{#each rawLines as line}
    {#if line[1] === line[1].toUpperCase()}
        <svelte:component this={getComponent(line)} {...getComponentProps(line)}></svelte:component>
    {:else}
        {@html line}
    {/if}
{/each}