Variable not found: Capturar todos los parámetros enviados a un componente Blazor

Normalmente un componente Blazor declara parámetros para permitir que otros componentes o páginas que lo utilicen puedan pasarle la información que necesita para funcionar.

Por ejemplo, el siguiente código en el interior de un componente definiría un par de propiedades llamadas Text y Repeat, que utiliza para repetir un texto tantas veces como se le indique:

@* File: Repeater.razor *@
@for (var i = 0; i < Repeat; i++)
{
<p>@Text</p>
}

@code {
    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public int Repeat { get; set; }
}

De esta forma, podríamos utilizar el componente desde otros puntos de la aplicación suministrándole los valores necesarios en cada caso:

<Repeater Text="Hola" Repeat="6" />

Sin embargo, alguna vez podría resultar interesante poder obtener todos los parámetros que se han enviado a un componente, pero sin necesidad de conocerlos previamente.

Para ello, Blazor dispone de una especie de mecanismo catch all que nos permite tener acceso a todos los parámetros suministrados al utilizar un componente. Esto lo conseguimos estableciendo a cierto el valor del parámetro CaptureUnmatchedValues al definir un parámetro de tipo Dictionary<string, object>:

@* File: Capturer.razor *@
<ul>
    @if (ExtraParams != null)
    {
        foreach (var (key, value) in ExtraParams)
        {
<li>@key = @value (@value.GetType().Name)</li>
        }
    }
</ul>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> ExtraParams { get; set; } 
}

Obviamente, en un componente sólo puede existir un parámetro configurado de esta manera.

Así, al utilizar el componente anterior de la siguiente forma...

<Capturer Key1="Value1" Key2="1" Key3 />

... el resultado obtenido sería el siguiente:

• Key1 = Value1 (String)
• Key2 = 1 (String)
• Key3 = True (Boolean). Fijaos que este caso es especial porque se trata de un atributo booleano: su simple presencia ya lo establece a cierto.

Es importante tener en cuenta que los parámetros suministados que mapeen correctamente a los declarados en el componente no los recibiremos a través de este diccionario. Es decir, sólo recibiremos los parámetros suministrados que no coincidan con parámetros declarados en el componente.

Por ejemplo, imaginad que los parámetros de nuestro componente se definen de la siguiente manera:

[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> ExtraParams { get; set; } 

[Parameter]
public string Text { get; set; }

En este caso, si instanciamos el componente de la siguiente manera, el valor de Text será establecido correctamente, mientras que en ExtraParams sólo encontraremos el valor de Foo:

<MyComponent Text="Hola" Foo="Bar" />

También es interesante saber que este diccionario con parámetros arbitrarios puede ser utilizado para establecer posteriormente los atributos de otro componente usando la directiva @attributes. Por ejemplo, imaginad que queremos implementar un componente llamado InputWithLabel que encapsule un tag <input> con su correspondiente etiqueta, y que podamos utilizar de la siguiente forma:

<InputWithLabel Text="Enter your full name" type="text" maxlength="50"></InputWithLabel>

En este caso, lo que nos interesaría hacer en InputWithLabel.razor sería establecer una propiedad para recuperar el valor de Text, y luego un diccionario para el resto de parámetros, que serían asignados tal cual al <input>. El código podría ser como el siguiente:

@* File: InputWithLabel.razor *@
<label>@Text</label>
<input @attributes="Params" />

@code {
    [Parameter]
    public string Text { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> Params { get; set; }
}

¡Espero que os sea útil!

Publicado en Variable not found.