ASP.NET Core Blazor atrybutówplatting i dowolnych parametrów

Składniki mogą przechwytywać i renderować dodatkowe atrybuty oprócz zadeklarowanych parametrów i pól składnika. Dodatkowe atrybuty można przechwycić w słowniku, a następnie zastosować do elementu o nazwie splatting, gdy składnik jest renderowany przy użyciu atrybutu @attributesRazor dyrektywy. Taki scenariusz jest przydatny do definiowania składnika, który tworzy element znacznika obsługujący wiele dostosowań. Na przykład może być żmudne zdefiniowanie atrybutów oddzielnie dla <input> elementu, który obsługuje wiele parametrów lub pól.

Przeplatanie atrybutów

W poniższym składniku Splat:

• Pierwszy <input> element (id="useIndividualParams") używa poszczególnych pól składników.
• Drugi element <input> (id="useAttributesDict") stosuje nakładanie atrybutów.

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

Z wyjątkiem id, elementy renderowane <input> na stronie internetowej mają identyczne atrybuty:

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

Mimo że w poprzednim przykładzie użyto pól dla pierwszego <input> elementu (id="useIndividualParams"), to samo zachowanie ma zastosowanie, gdy są używane parametry składnika.

Dowolne atrybuty

Aby akceptować dowolne atrybuty, zdefiniuj parametr składnika z właściwością CaptureUnmatchedValues ustawioną na true:

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

Właściwość CaptureUnmatchedValues klasy [Parameter] umożliwia dopasowywanie parametru do wszystkich atrybutów, które nie pasują do żadnego innego parametru. Składnik może definiować tylko jeden parametr z właściwością CaptureUnmatchedValues. Typ właściwości używany z właściwością CaptureUnmatchedValues musi umożliwiać przypisywanie z obiektu Dictionary<string, object> przy użyciu kluczy ciągów. W takim scenariuszu można też używać obiektu IEnumerable<KeyValuePair<string, object>> lub IReadOnlyDictionary<string, object>.

Ważne jest położenie atrybutu @attributes względem położenia atrybutów elementu. Gdy @attributes atrybuty są rozłożone na renderowanym elemencie, są przetwarzane od prawej do lewej (od ostatniej do pierwszej), a pierwszy atrybut ma pierwszeństwo dla wszelkich wspólnych atrybutów. Rozważmy poniższy przykład składnika nadrzędnego, który używa składnika podrzędnego, gdzie element podrzędny ustawia atrybut "extra", a składnik nadrzędny tworzy atrybut "extra" w składniku podrzędnym.

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>

W składniku AttributeOrderChild1 atrybut extra jest ustawiony na prawo od atrybutu @attributes. Renderowany AttributeOrderParent1<div> składnik zawiera extra="5" element po przekazaniu dodatkowego atrybutu, ponieważ atrybuty są przetwarzane od prawej do lewej (od ostatniego do pierwszego) z pierwszym atrybutem "extra", który jest zakodowanym extra atrybutem AttributeOrderParent1 HTML składnika:

<div extra="5" />

W poniższym przykładzie kolejność elementów extra i @attributes jest odwrócona w składniku podrzędnym <div>. W tym scenariuszu składnik AttributeOrderParent2, który jest renderowany jako <div>, zawiera extra="10", gdy przechodzi przez dodatkowy atrybut, ponieważ pierwszy przetworzony atrybut "extra" to "splatted" atrybut HTML extra pochodzący ze składnika nadrzędnego.

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>

Strona internetowa <div> renderowana w składniku nadrzędnym zawiera extra="10":

<div extra="10" />