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
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
Por ejemplo, imaginad que los parámetros de nuestro componente se definen de la siguiente manera:
Publicado en Variable not found.
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 {
@Text
}
@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:
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
:@* File: Capturer.razor *@
@if (ExtraParams != null)
{
foreach (var (key, value) in ExtraParams)
{
- @key = @value (@value.GetType().Name)
}
}
@code {
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary 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...
... 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.
Por ejemplo, imaginad que los parámetros de nuestro componente se definen de la siguiente manera:
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary 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
:
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
con su correspondiente etiqueta, y que podamos utilizar de la siguiente forma:
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
. El código podría ser como el siguiente:@* File: InputWithLabel.razor *@
@code {
[Parameter]
public string Text { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary Params { get; set; }
}
¡Espero que os sea útil!Publicado en Variable not found.