javascript / intermediate
Snippet
Dynamisches Rendern von Komponenten
Das <svelte:component>-Element ermöglicht es, eine Komponente basierend auf einem Ausdruck dynamisch zu rendern. Dies ist nützlich für Dashboards, Tab-Systeme oder jede UI, bei der die anzuzeigende Komponente erst zur Laufzeit bekannt ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import LineChart from './LineChart.svelte';import BarChart from './BarChart.svelte';let chartType = 'line';const chartMap = { line: LineChart, bar: BarChart };</script><select bind:value={chartType}><option value="line">Line</option><option value="bar">Bar</option></select><svelte:component this={chartMap[chartType]} data={analytics} />
svelte
Erklärung
1
const chartMap = { line: LineChart, bar: BarChart };
Speichert die Komponentenen-Konstruktoren in einem Objekt für eine einfache Suche.
2
<svelte:component this={...} />
Ein spezielles Svelte-Element, das die an die Eigenschaft 'this' übergebene Komponente instanziiert.