2

我只是在为即将到来的项目研究 Svelte 框架。

我想知道（因为这是项目要求）是否可以从服务器加载一些 HTML 字符串（使用 fetch api）并将其动态插入到 Svelte 组件中。

似乎可以使用{@html my_html_string}. 有没有办法在 HTML 字符串中包含实际 Svelte 元素的标签？

例如

<script>
    // import MyCustomElementHere....

    let my_html_string = 'Some text <MyCustomElement/> some more text';
</script>    

<p> {my_html_string} [somehow??] </p>

我在想这可能通过将组件变成自定义元素（或其他东西）来实现，但我还没有设法完成这项工作（可能是因为我对框架还不够了解）。

有谁知道这是否真的可能？

4

3 回答 3

7

不可能做类似的事情{@html "<MyComponent/>"}。这将需要生成的代码包含一个 HTML 解析器，这会显着增加包的大小。

正如您所说，您可以通过编译<MyComponent>为一个名为的自定义元素<my-component>并使用该字符串来做一些非常相似的事情。我们需要完成相关的文档，但基本上您需要向组件添加一些元数据......

<svelte:options tag="my-component"/>

...然后将customElement: true选项传递给编译器。

于 2019-07-20T15:29:41.600 回答
-1

这是一个想法：您可以解析字符串以查找需要显示的自定义元素，然后执行以下操作：

<script>
    import MyCustomElemen from ...

    let my_html_string = 'Some text <MyCustomElement/> some more text';
    // assume u parsed it
    let element_to_use = MyCustomElement;
    let html1 = 'Some text ';
    let html2 = ' some more text'
    new element_to_use({
      target: document.getElementById("someId"),
      props: {
        // whatever your component needs
      }
    })
</script>    

<div>
  <div
    contenteditable="true"
    bind:innerHTML={html1}
  ></div>
  <div id="someId"></div>
  <div
    contenteditable="true"
    bind:innerHTML={html2}
  ></div>
</div>

我希望这个想法是可见的和有用的！

于 2021-05-06T21:01:40.193 回答
-1

我认为不可能做类似的事情：

<script>
let comp="MyComponent"
</script>

<{comp} />
于 2019-07-27T20:12:24.640 回答