从字符串中呈现带有Svelte标签的Html

Question

我想生成html组件(按钮)在我的脚本在js中有苗条的标签，如on:click:

<button class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click={() => {
managePages(10);
}}
>
10
</button>

但是当我用{@html button}显示它时，on:click标签并不重要…

这是我的代码生成的html与svelte标签在js:

for (let i = 1; i <= 3; i++) {
if (i == $trialsPage) {
html += `<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(${i});
}}"
>
${i}
</button>`;
} else {
html += `<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(${i});
}}"
>
${i}
</button>`;
}
}

如何让Svelte从字符串中考虑标签?

Answer 1

{#if nbPages > 0 && nbPages <= 5}
<div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
<div class="-mt-px flex w-0 flex-1">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
<Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
Previous
</button>
</div>
<div class="hidden md:-mt-px md:flex">
{#each Array(nbPages) as row, i}
{#if i + 1 == $trialsPage}
<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{:else}
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{/if}
{/each}
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
Next
<Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
</button>
</div>
</div>
{:else if nbPages > 0 && nbPages > 5}
<div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
<div class="-mt-px flex w-0 flex-1">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
<Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
Previous
</button>
</div>
<div class="hidden md:-mt-px md:flex">
{#each Array(3) as row, i}
{#if i + 1 == $trialsPage}
<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{:else}
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{/if}
{/each}
<span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">...</span>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages - 2);
}}"
>
{nbPages - 2}
</button>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages - 1);
}}"
>
{nbPages - 1}
</button>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages);
}}"
>
{nbPages}
</button>
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
Next
<Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
</button>
</div>
</div>
{/if}