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

我正在使用

sapper

构建一个站点，该站点使用

[slug].svelte

惯例来处理个人博客条目。博客内容来自（模拟）数据库，包含html

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

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

并且，在

{@html post.html}

中呈现的包含html中：

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

雅达雅达雅达雅达

更多的雅达雅达雅达

a组件

不会被实例化或调用

有没有办法做到这一点？还是我想做一些不可能的事

（我知道这个组件还可以——它已经在另一个包含完整html的文件中进行了测试。）

---

Thanx

我认为仅凭

@html

指令是不可能的

发件人：

表达式应该是有效的独立HTML-

{@HTML”“}内容{@HTML”“}

将不起作用，因为它不是有效的HTML

因为

可以从字符串内容动态呈现组件

下面是一个快速的概念证明。有一堆边缘案例没有被发现，但这表明这是可能的。我还粘贴了下面的代码

<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}


从“/ComponentA.svelte”导入组件A；
从“./ComponentB.svelte”导入组件B；
让raw=`yada-yada-yada

更多的雅达雅达雅达…
`；
$：rawLines=raw.split（'\n'）；
函数getComponent（行）{
常量componentName=line.split（“”）[0]。子字符串（1）；
开关（组件名称）{
案例“组件A”：
返回组件a；
案例“组件B”：
返回组件B；
}
返回null；
}
函数getComponentProps（行）{
const props=直线分割（“”）.slice（1，-1）；
const kvPairs=props.map（p=>p.replaceAll（''“，'.split（'='））；
返回Object.fromEntries（kvPairs）；
}
{#每一条线都是线}
{#如果第[1]行===第[1]行.toUpperCase（）}
{:else}
{@html行}
{/if}
{/每个}
有趣的想法。我最后编写了一个预处理器，将代码片段注入模板文件，并将命名文件写入“src/routes/blog/”文件夹。苗条的编译器像往常一样从那里获取它。可能不是最优雅的解决方案，但它可以工作。它在编辑时会失去实时更新功能，因此我不得不这样做当我进行编辑时进行重新编译。另外，我想我可以从中调用其他预处理器，例如降价处理器。
<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}