Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Raise/handle event from/of dynamic component

$
0
0

I'm currently facing the following problem.

I have a ComponentA which renders dynamic components of unknown type (ComponentA gets these components to render via its props - importin these component types is not conceivable, as there would be too many and it can grow dynamically over time.).

The dynamic component dispatches an event called "testEvent".I now want to react to this event in ComponentA. But this does not really work.

It works when I'm using a non-dynamic/concrete/imported component (ConcreteComponent in the code example).

ComponentA:

<script>import { type ComponentType} from "svelte";import { ConcreteComponent } from "./ConcreteComponent.svelte"export let components:ComponentType[];export let component: ComponentType;function handleMessage(event: CustomEvent<{text:string}>) {        console.log(event.detail.text);    }</script><ConcreteComponent on:customTestEvent={handleMessage}/> //works<svelte:component this={component} on:customTestEvent={handleMessage}/> //does not work

DynamicComponent:

<!-- DynamicComponent --><script>    import { createEventDispatcher } from 'svelte';    const dispatch = createEventDispatcher<{ customTestEvent: {text:string}}>();    function raiseEvent() {      dispatch("customTestEvent", {text: "Dynamic!"});    }</script>

ConcreteComponent:

<script>    import { createEventDispatcher } from 'svelte';    const dispatch = createEventDispatcher<{ customTestEvent: {text:string}}>();    function raiseEvent() {      dispatch("customTestEvent", {text: "Concrete!"});    }</script>

How can I catch an event that has been thrown from a dynamic component?


Viewing all articles
Browse latest Browse all 1541

Trending Articles