Pass through exact unmatched parameter to child component

264 Views Asked by At

I found out recently that blazor can pass through unmatched parameters to whatever element I want like this:

MyComponent.razor

<div @attributes=AdditionalAttributes />
@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
}

MyPage.razor
<MyComponent style="..." />

This works wonders.

But, what if I want to pass just some of these unmatched parameters to a nested component of MyComponent?

Would it look like this?


MyComponent.razor
<div @attributes=AdditionalAttributes>
    <MyOtherComponent @OneOfItsAttributes=AdditionalAttributes[theAttribute] />
</div>
@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
}

MyPage.razor
<MyComponent style="..." theAttribute="..." />

Is there such a thing?
If so, does it work with @bind-?

A mechanism like this would greatly reduce code, so that if we are combining 2 or more components into one container component, we wouldn't have to copy-paste and bind all parameters from both components into that one container component.

Edit

I've read this article about cascading parameters, and it looked like it could be the solution, but at the section Updating Values where writer asks

But what if we wanted to trigger an update from a component deeper in the component tree that was declared in a different component?

is what interests me.

The solution that writer proposes is to create a service to manage these variables, though what I am creating isn't something that is persistent enought to be stored in a service.

What I mean by that: Here's my component tree

  • DbInputSlider
    • MyInputSlider
      • MySlider
      • MyInputBase

I believe you can see how I will be reusing all of these components and which one provides which functionality.

So my question is maybe more about efficiency, where I'd like to, with as least code as possible, and after my DbInputSlider loads a dictionary from database, send that dictionary down to MyInputSlider and then to MySlider, while MyInputSlider can still get OnSave event from MySlider so that he can hide MySlider and just show the selected value, and still propagate that event to DbInputSlider so that it can save the selected value to database.

I sware I tried to explain everything as short as possible.

0

There are 0 best solutions below