Uso compartido de datos en aplicaciones Blazor

Blazor incluye varias maneras de compartir información entre componentes. Puede usar parámetros de componente o parámetros en cascada para enviar valores de un componente primario a un componente secundario. El patrón AppState es otro enfoque que puede usar para almacenar valores y acceder a ellos desde cualquier componente de la aplicación.

Supongamos que está trabajando en el nuevo sitio web de entrega de pizzas. Se deben mostrar varias pizzas en la página principal de la misma manera. Le gustaría mostrar las pizzas mediante la representación de un componente secundario para cada pizza. Ahora, quiere pasar un id. a ese componente secundario que determina la pizza que se muestra. También quiere almacenar y mostrar un valor en varios componentes que muestre el número total de pizzas que vendió hoy.

En esta unidad, aprenderá tres técnicas diferentes que puede usar para compartir valores entre dos o más componentes de Blazor.

Compartir información con otros componentes mediante parámetros de componente

En una aplicación web Blazor, cada componente renderiza una porción de HTML. Algunos componentes representan una página completa, pero otros representan fragmentos más pequeños de marcado, como una tabla, un formulario o un único control. Si el componente representa solo una sección de marcado, debe usarlo como componente secundario dentro de un elemento primario. El componente secundario también puede ser componente primario para otros componentes más pequeños que se representan dentro de él. Los componentes secundarios también se conocen como componentes anidados.

En esta jerarquía de componentes primarios y secundarios, puede compartir información entre ellos mediante los parámetros de componente. Defina estos parámetros en los componentes secundarios y, a continuación, establezca sus valores en el elemento primario. Por ejemplo, si tiene un componente secundario que muestra fotos de pizza, puede usar un parámetro de componente para pasar el id. de pizza. El componente secundario busca la pizza a partir del id. y obtiene imágenes y otros datos. Si quiere mostrar muchas pizzas diferentes, puede usar este componente secundario varias veces en la misma página primaria, pasando un id. diferente a cada elemento secundario.

Comience definiendo el parámetro del componente en el componente hijo. Se define como una propiedad pública de C# y se decora con el [Parameter] atributo :

<h2>New Pizza: @PizzaName</h2>

<p>@PizzaDescription</p>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    [Parameter]
    public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}

Dado que los parámetros de componente son miembros del componente secundario, puede representarlos en el código HTML mediante el símbolo reservado @ de Blazor, seguido de su nombre. Además, el código anterior especifica un valor predeterminado para el PizzaDescription parámetro . Este valor se representa si el componente primario no pasa un valor. De lo contrario, el valor pasado del elemento primario lo reemplaza.

También puede usar clases personalizadas en el proyecto como parámetros de componente. Considere esta clase que describe un ingrediente:

public class PizzaTopping
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
}

Puede usarlo como parámetro de componente de la misma manera que un valor de parámetro para tener acceso a propiedades individuales de la clase mediante la sintaxis de puntos:

<h2>New Topping: @Topping.Name</h2>

<p>Ingredients: @Topping.Ingredients</p>

@code {
    [Parameter]
    public PizzaTopping Topping { get; set; }
}

En el componente padre, se establecen los valores de parámetro mediante atributos de las etiquetas del componente hijo. Estableces componentes simples directamente. Con un parámetro basado en una clase personalizada, se usa código de C# insertado para crear una nueva instancia de esa clase y establecer sus valores:

@page "/pizzas-toppings"

<h1>Our Latest Pizzas and Topping</h1>

<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />

<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli." })" />

Uso compartido de información mediante parámetros en cascada

Los parámetros de componente funcionan bien cuando se desea pasar un valor al elemento secundario inmediato de un componente. Las cosas se complican cuando se tiene una jerarquía profunda con elementos secundarios de elementos secundarios, y así sucesivamente. Los parámetros de los componentes no se pasan automáticamente a los componentes nietos desde los componentes ancestros ni más abajo en la jerarquía. Para controlar este problema de forma elegante, Blazor incluye parámetros en cascada. Cuando se establece el valor de un parámetro en cascada en un componente, su valor está disponible automáticamente para todos los componentes descendientes en cualquier profundidad.

En el componente primario, el uso de la <CascadingValue> etiqueta especifica la información que se aplicará en cascada a todos los descendientes. Esta etiqueta se implementa como un componente Blazor incorporado. Cualquier componente representado dentro de esa etiqueta puede acceder al valor.

@page "/specialoffers"

<h1>Special Offers</h1>

<CascadingValue Name="DealName" Value="Throwback Thursday">
    <!-- Any descendant component rendered here will be able to access the cascading value. -->
</CascadingValue>

En los componentes descendientes, puede acceder al valor en cascada mediante los miembros de componente y su decoración con el atributo [CascadingParameter].

<h2>Deal: @DealName</h2>

@code {
    [CascadingParameter(Name="DealName")]
    private string DealName { get; set; }
}

Por lo tanto, en este ejemplo, la <h2> etiqueta tiene el contenido Deal: Throwback Thursday porque un componente antecesor establece ese valor en cascada.

En el ejemplo anterior, el atributo Name del elemento principal identifica el valor en cascada, coincidiendo con el valor Name en el atributo [CascadingParameter]. Opcionalmente, puede omitir estos nombres, en cuyo caso los atributos coinciden por tipo. Omitir el nombre funciona bien cuando solo tiene un parámetro de ese tipo. Si desea poner en cascada dos valores de cadena diferentes, debe usar nombres de parámetro para evitar cualquier ambigüedad.

Uso compartido de información mediante AppState

Otro enfoque para compartir información entre distintos componentes es usar el patrón AppState. Cree una clase que defina las propiedades que desea almacenar y regístrela como un servicio con ámbito. En cualquier componente en el que quiera establecer o usar los valores de AppState, inserte el servicio y, a continuación, puede acceder a sus propiedades. A diferencia de los parámetros de componente y los parámetros en cascada, los valores de AppState están disponibles para todos los componentes de la aplicación, incluso los componentes que no son elementos secundarios del componente que almacenan el valor.

Por ejemplo, considere esta clase que almacena un valor sobre las ventas:

public class PizzaSalesState
{
    public int PizzasSoldToday { get; set; }
}

Agregaría la clase como un servicio con ámbito en el archivo Program.cs :

...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...

Ahora, en cualquier componente en el que quiera establecer o recuperar valores de AppState, puede insertar la clase y, a continuación, acceder a las propiedades:

@page "/"
@inject PizzaSalesState SalesState

<h1>Welcome to Blazing Pizzas</h1>

<p>Today, we've sold this many pizzas: @SalesState.PizzasSoldToday</p>

<button @onclick="IncrementSales">Buy a Pizza</button>

@code {
    private void IncrementSales()
    {
        SalesState.PizzasSoldToday++;
    }
}

En la unidad siguiente, lo probará usted mismo!