Parámetros arbitrarios y de expansión de atributos de ASP.NET Core Blazor

Los componentes pueden capturar y representar más atributos aparte de los parámetros declarados del componente. Los atributos adicionales se pueden capturar en un diccionario y luego expandirse en un elemento cuando el componente se representa por medio del atributo de directiva de @attributesRazor. Este escenario es útil para definir un componente que genera un elemento de marcado que admite diversas personalizaciones. Por ejemplo, definir atributos por separado para un elemento <input> que admite muchos parámetros puede ser un engorro.

Expansión de atributos

En el componente Splat siguiente:

• El primer elemento <input> (id="useIndividualParams") usa parámetros de componente individuales.
• El segundo elemento <input> (id="useAttributesDict") usa la expansión de atributos.

Splat.razor:

@page "/splat"

<PageTitle>SPLAT!</PageTitle>

<h1>Splat Parameters Example</h1>

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

Los elementos <input> representados en la página web son idénticos:

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

Atributos arbitrarios

Para aceptar atributos arbitrarios, defina un parámetro de componente con la propiedad CaptureUnmatchedValues establecida en true:

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

La propiedad CaptureUnmatchedValues en [Parameter] permite que el parámetro coincida con todos los atributos que no coinciden con ningún otro parámetro. Un componente solamente puede definir un parámetro con CaptureUnmatchedValues. El tipo de propiedad que se usa con CaptureUnmatchedValues se debe poder asignar desde Dictionary<string, object> con claves de cadena. El uso de IEnumerable<KeyValuePair<string, object>> o IReadOnlyDictionary<string, object> también son opciones en este escenario.

La posición de @attributes relativa a la posición de los atributos de elemento es importante. Cuando @attributes se expande en el elemento, los atributos se procesan de derecha a izquierda (de último a primero). Veamos el siguiente ejemplo de un componente primario que usa un componente secundario:

AttributeOrderChild1.razor:

<div @attributes="AdditionalAttributes" extra="5" />

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

AttributeOrder1.razor:

@page "/attribute-order-1"

<PageTitle>Attribute Order 1</PageTitle>

<h1>Attribute Order Example 1</h1>

<AttributeOrderChild1 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild1 component.
</p>

El atributo extra del componente de AttributeOrderChild1 se establece a la derecha de @attributes. El elemento <div> representado del componente AttributeOrderParent1 contiene extra="5" cuando se pasa a través del atributo adicional, ya que los atributos se procesan de derecha a izquierda (de último a primero):

<div extra="5" />

En el ejemplo siguiente, el orden de extra y @attributes se invierte en el elemento <div> del componente secundario:

AttributeOrderChild2.razor:

<div extra="5" @attributes="AdditionalAttributes" />

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

AttributeOrder2.razor:

@page "/attribute-order-2"

<PageTitle>Attribute Order 2</PageTitle>

<h1>Attribute Order Example 2</h1>

<AttributeOrderChild2 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild2 component.
</p>

El elemento <div> en la página web representada del componente primario contiene extra="10" cuando se pasa por el atributo adicional:

<div extra="10" />