javascript / expert
Snippet
Dependency Injection mit der Context-API
Die Context-API ist ein Experten-Pattern für die Kommunikation in tiefen Komponenten-Bäumen ohne 'Prop-Drilling'. Im Gegensatz zu Stores ist der Context standardmäßig nicht reaktiv und an den Lebenszyklus der Komponente und ihrer Nachkommen gebunden. Er ist ideal für Dependency Injection, wie z.B. das Bereitstellen eines Datenbank-Clients oder einer Theme-Engine für einen großen Unterbaum.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
// ParentComponent.svelteimport { setContext } from 'svelte';const api = {log: (msg) => console.log(`[Context]: ${msg}`)};setContext('app-api', api);// ChildComponent.svelteimport { getContext } from 'svelte';const api = getContext('app-api');api.log('Child calling context!');
svelte
Erklärung
1
setContext(key, value)
Verknüpft ein Objekt mit einem Schlüssel, auf den alle Kinder dieser Komponente zugreifen können.
2
getContext(key)
Ruft das Objekt vom nächsten übergeordneten Provider ab. Gibt undefined zurück, falls nicht gefunden.