Udostępnianie danych w aplikacjach platformy Blazor
Platforma Blazor oferuje kilka sposobów udostępniania informacji między składnikami. Parametry składnika lub parametry kaskadowe umożliwiają wysyłanie wartości ze składnika nadrzędnego do składnika podrzędnego. Wzorzec AppState to inne podejście, którego można użyć do przechowywania wartości i uzyskiwania do nich dostępu z dowolnego składnika w aplikacji.
Załóżmy, że pracujesz nad nową witryną internetową dostarczania pizzy. Wiele pizzy powinno być wyświetlanych na stronie głównej w taki sam sposób. Chcesz wyświetlić pizze, renderując składnik podrzędny dla każdej pizzy. Teraz chcesz przekazać identyfikator do tego składnika podrzędnego, który określa, że będzie wyświetlana pizza. Chcesz również przechowywać i wyświetlać wartość na wielu składnikach, które pokazują łączną liczbę sprzedanych pizz.
W tej lekcji poznasz trzy różne techniki, których można użyć do udostępniania wartości między co najmniej dwoma składnikami platformy Blazor.
Udostępnianie informacji innym składnikom przy użyciu parametrów składnika
W aplikacji internetowej platformy Blazor każdy składnik renderuje część kodu HTML. Niektóre składniki renderuje pełną stronę, ale inne renderuje mniejsze fragmenty znaczników, takie jak tabela, formularz lub pojedyncza kontrolka. Jeśli składnik renderuje tylko sekcję znaczników, należy użyć jej jako składnika podrzędnego w składniku nadrzędnym. Składnik podrzędny może być również nadrzędny dla innych, mniejszych składników renderujących w nim. Składniki podrzędne są również nazywane zagnieżdżonymi składnikami.
W tej hierarchii składników nadrzędnych i podrzędnych można udostępniać między nimi informacje przy użyciu parametrów składnika. Zdefiniuj te parametry w składnikach podrzędnych, a następnie ustaw ich wartości w obiekcie nadrzędnym. Jeśli na przykład masz składnik podrzędny, który wyświetla zdjęcia pizzy, możesz użyć parametru składnika, aby przekazać identyfikator pizzy. Składnik podrzędny wyszukuje pizzę z identyfikatora i uzyskuje obrazy i inne dane. Jeśli chcesz wyświetlić wiele różnych pizz, możesz użyć tego składnika podrzędnego wiele razy na tej samej stronie nadrzędnej, przekazując inny identyfikator do każdego elementu podrzędnego.
Najpierw zdefiniujesz parametr składnika w składniku podrzędnym. Jest on definiowany jako właściwość publiczna języka C# i ozdobiony atrybutem [Parameter] :
<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."
}
Ponieważ parametry składnika są elementami członkowskimi składnika podrzędnego, można je renderować w kodzie HTML przy użyciu symbolu zarezerwowanego @ platformy Blazor, a następnie ich nazwy. Ponadto powyższy kod określa wartość domyślną parametru PizzaDescription . Ta wartość jest renderowana, jeśli składnik nadrzędny nie przekazuje wartości. W przeciwnym razie jest zastępowana przez wartość przekazaną z elementu nadrzędnego.
Możesz również użyć klas niestandardowych w projekcie jako parametrów składników. Rozważmy tę klasę, która opisuje topping:
public class PizzaTopping
{
public string Name { get; set; }
public string Ingredients { get; set; }
}
Można użyć tego jako parametru składnika w taki sam sposób, jak wartość parametru, aby uzyskać dostęp do poszczególnych właściwości klasy przy użyciu składni kropki:
<h2>New Topping: @Topping.Name</h2>
<p>Ingredients: @Topping.Ingredients</p>
@code {
[Parameter]
public PizzaTopping Topping { get; set; }
}
W składniku nadrzędnym ustawiasz wartości parametrów przy użyciu atrybutów tagów składnika podrzędnego. Proste składniki można ustawić bezpośrednio. Za pomocą parametru opartego na klasie niestandardowej użyjesz wbudowanego kodu języka C#, aby utworzyć nowe wystąpienie tej klasy i ustawić jego wartości:
@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." })" />
Udostępnianie informacji przy użyciu parametrów kaskadowych
Parametry składnika działają dobrze, gdy chcesz przekazać wartość do natychmiastowego elementu podrzędnego składnika. Rzeczy stają się niezręczne, gdy masz głęboką hierarchię z dziećmi dzieci itd. Parametry składnika nie są automatycznie przekazywane do składników wnuków ze składników nadrzędnych ani w dalszej części hierarchii. Aby elegancko poradzić sobie z tym problemem, blazor zawiera parametry kaskadowe. Po ustawieniu wartości parametru kaskadowego w składniku jego wartość jest automatycznie dostępna dla wszystkich składników podrzędnych na dowolną głębokość.
W składniku nadrzędnym przy użyciu tagu <CascadingValue> określa informacje, które będą kaskadowo do wszystkich elementów potomnych. Ten tag jest implementowany jako wbudowany składnik platformy Blazor. Każdy składnik renderowany w ramach tego tagu może uzyskać dostęp do wartości.
@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>
W składnikach potomnych można uzyskać dostęp do wartości kaskadowej przy użyciu składowych składników i dekorować je za pomocą atrybutu [CascadingParameter] .
<h2>Deal: @DealName</h2>
@code {
[CascadingParameter(Name="DealName")]
private string DealName { get; set; }
}
W tym przykładzie <h2> tag ma zawartość Deal: Throwback Thursday , ponieważ ta kaskadowa wartość została ustawiona przez składnik przodka.
Uwaga
Podobnie jak w przypadku parametrów składników, można przekazać obiekty jako parametry kaskadowe, jeśli masz bardziej złożone wymagania.
W poprzednim przykładzie wartość kaskadowa jest identyfikowana przez Name atrybut w obiekcie nadrzędnym, który jest zgodny z wartością Name w atrybucie [CascadingParameter] . Opcjonalnie można pominąć te nazwy, w tym przypadku atrybuty są dopasowywane według typu. Pominięcie nazwy działa dobrze, gdy masz tylko jeden parametr tego typu. Jeśli chcesz kaskadowo utworzyć dwie różne wartości ciągu, należy użyć nazw parametrów, aby uniknąć niejednoznaczności.
Udostępnianie informacji przy użyciu funkcji AppState
Innym podejściem do udostępniania informacji między różnymi składnikami jest użycie wzorca AppState. Utworzysz klasę, która definiuje właściwości, które chcesz przechowywać i rejestrować jako usługę o określonym zakresie. W każdym składniku, w którym chcesz ustawić lub użyć wartości AppState, należy wstrzyknąć usługę, a następnie uzyskać dostęp do jej właściwości. W przeciwieństwie do parametrów składników i parametrów kaskadowych wartości w usłudze AppState są dostępne dla wszystkich składników aplikacji, nawet składników, które nie są elementami podrzędnym składnika, który przechowywał wartość.
Rozważmy na przykład tę klasę, która przechowuje wartość sprzedaży:
public class PizzaSalesState
{
public int PizzasSoldToday { get; set; }
}
Klasę należy dodać jako usługę o określonym zakresie w pliku Program.cs :
...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...
Teraz w dowolnym składniku, w którym chcesz ustawić lub pobrać wartości AppState, możesz wstrzyknąć klasę, a następnie uzyskać dostęp do właściwości:
@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++;
}
}
Uwaga
Ten kod implementuje licznik, który zwiększa się, gdy użytkownik wybierze przycisk, podobnie jak w przykładzie w samouczku platformy Blazor — kompilowanie pierwszej aplikacji Platformy Blazor. Różnica polega na tym, że w tym przypadku, ponieważ przechowywaliśmy wartość licznika w usłudze o określonym zakresie AppState, liczba jest utrwalana w obciążeniach stron i może być widoczna przez innych użytkowników.
W następnej lekcji wypróbujesz to samodzielnie!