Projection d’attributs et paramètres arbitraires ASP.NET Core Blazor

Les composants peuvent capturer et générer le rendu d’attributs supplémentaires en plus des paramètres déclarés du composant. Des attributs supplémentaires peuvent être capturés dans un dictionnaire, puis appliqués à un élément, appelé splatting, lorsque le composant est rendu à l’aide de l’attribut @attributesRazor de directive. Ce scénario est utile pour définir un composant qui produit un élément de balisage prenant en charge des personnalisations diverses. Par exemple, il peut être fastidieux de définir séparément des attributs pour un <input> qui prend en charge de nombreux paramètres.

Projection d’attributs

Dans le composant Splat suivant :

• Le premier élément <input> (id="useIndividualParams") utilise des paramètres de composant individuels.
• Le deuxième élément <input> (id="useAttributesDict") utilise la projection d’attributs.

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" }
        };
}

Les éléments <input> rendus dans la page web sont identiques :

<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">

Attributs arbitraires

Pour accepter des attributs arbitraires, définissez un paramètre de composant avec la propriété CaptureUnmatchedValues définie sur true :

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

La propriété CaptureUnmatchedValues sur [Parameter] permet au paramètre de capturer tous les attributs qui ne correspondent à aucun autre paramètre. Un composant ne peut définir qu’un seul paramètre avec CaptureUnmatchedValues. Le type de propriété utilisé avec CaptureUnmatchedValues doit pouvoir être affecté à partir de Dictionary<string, object> avec des clés de chaîne. Il également possible d’utiliser IEnumerable<KeyValuePair<string, object>> ou IReadOnlyDictionary<string, object> dans ce scénario.

La position de @attributes par rapport à la position des attributs d’élément est importante. Quand des @attributes sont projetés sur l’élément, les attributs sont traités de droite à gauche (du dernier au premier). Prenez l’exemple suivant d’un composant parent qui consomme un composant enfant :

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>

L’attribut extra du composant AttributeOrderChild1 est défini à droite de @attributes. Le <div> rendu du composant AttributeOrderParent1 contient extra="5" quand il est passé par le biais de l’attribut supplémentaire, car les attributs sont traités de droite à gauche (du dernier au premier) :

<div extra="5" />

Dans l’exemple suivant, l’ordre de extra et de @attributes est inversé dans le <div> du composant enfant :

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>

Le <div> dans la page web rendue du composant parent contient extra="10" quand il est passé par le biais de l’attribut supplémentaire :

<div extra="10" />