Sdílení dat v aplikacích Blazor
- 7 min
Blazor obsahuje několik způsobů sdílení informací mezi komponentami. K odesílání hodnot z nadřazené komponenty do podřízené komponenty můžete použít parametry komponenty nebo kaskádové parametry. Model AppState je dalším přístupem, který můžete použít k ukládání hodnot a přístupu k nim z libovolné komponenty v aplikaci.
Předpokládejme, že pracujete na novém webu pro doručování pizzy. Na domovské stránce by se mělo zobrazit více pizz stejným způsobem. Pizzy chcete zobrazit tak, že pro každou pizzu vykreslujete podřízenou komponentu. Teď chcete předat ID této podřízené komponentě, která určuje zobrazenou pizzu. Chcete také uložit a zobrazit hodnotu na více součástech, které zobrazují celkový počet pizz, které jste dnes prodali.
V této lekci se seznámíte se třemi různými technikami, které můžete použít ke sdílení hodnot mezi dvěma nebo více komponentami Blazor.
Sdílení informací s dalšími komponentami pomocí parametrů komponent
Ve webové aplikaci Blazor každá komponenta vykresluje část KÓDU HTML. Některé komponenty vykreslují úplnou stránku, ale jiné vykreslují menší fragmenty značek, jako je tabulka, formulář nebo jeden ovládací prvek. Pokud vaše komponenta vykresluje jenom část značek, musíte ji použít jako podřízenou komponentu v rámci nadřazené komponenty. Vaše dětská komponenta může být také rodičem jiných menších komponent, které se v ní vykreslují. Podřízené komponenty se také označují jako vnořené komponenty.
V této hierarchii nadřazených a podřízených komponent můžete sdílet informace mezi nimi pomocí parametrů komponenty . Definujte tyto parametry u podřízených komponent a nastavte jejich hodnoty v nadřazené komponentě. Pokud máte například podřízenou komponentu, která zobrazuje fotky pizzy, můžete k předání ID pizzy použít parametr komponenty. Podřízená komponenta vyhledá pizzu z ID a získá obrázky a další data. Pokud chcete zobrazit mnoho různých pizz, můžete tuto podřízenou komponentu použít několikrát na stejné nadřazené stránce a předat každému dítěti jiné ID.
Začněte definováním parametru komponenty v podřízené komponentě. Definujete ji jako veřejnou vlastnost jazyka C# a vyzdobit ji atributem [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."
}
Vzhledem k tomu, že parametry komponenty jsou členy podřízené komponenty, můžete je vykreslit ve svém HTML pomocí vyhrazeného @ symbolu Blazoru následovaného jejich názvem. Předchozí kód také určuje výchozí hodnotu pro PizzaDescription parametr. Tato hodnota se vykreslí, pokud nadřazená komponenta nepředává hodnotu. Jinak ji přepíše hodnota předaná od nadřazeného objektu.
Vlastní třídy můžete v projektu použít také jako parametry komponent. Vezměte v úvahu tuto třídu, která popisuje polevu:
public class PizzaTopping
{
public string Name { get; set; }
public string Ingredients { get; set; }
}
Tuto možnost můžete použít jako parametr komponenty stejným způsobem jako hodnotu parametru pro přístup k jednotlivým vlastnostem třídy pomocí syntaxe tečky:
<h2>New Topping: @Topping.Name</h2>
<p>Ingredients: @Topping.Ingredients</p>
@code {
[Parameter]
public PizzaTopping Topping { get; set; }
}
V nadřazené komponentě nastavíte hodnoty parametrů pomocí atributů značek podřízené komponenty. Jednoduché komponenty nastavíte přímo. S parametrem založeným na vlastní třídě použijete vložený kód jazyka C# k vytvoření nové instance této třídy a nastavení jejích hodnot:
@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." })" />
Sdílení informací pomocí kaskádových parametrů
Parametry komponent fungují dobře, pokud chcete předat hodnotu bezprostřední podřízené součásti. Věci se stanou nepříjemné, když máte hlubokou hierarchii s podřízenými podřízenými dětmi atd. Parametry komponent se automaticky nepředávají potomkovským komponentám od předků komponent k dalším úrovním hierarchie. K elegantnímu řešení tohoto problému obsahuje Blazor kaskádové parametry. Když nastavíte hodnotu kaskádového parametru v komponentě, její hodnota je automaticky k dispozici pro všechny potomkové komponenty do jakékoli hloubky.
V nadřazené komponentě pomocí značky <CascadingValue> specifikuje informace, které budou kaskádovat na všechny potomky. Tato značka je implementována jako vestavěná součást Blazor. Každá komponenta vykreslená v rámci této značky má přístup k hodnotě.
@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>
V následnických komponentách můžete získat přístup ke kaskádové hodnotě pomocí členů komponent, které ozdobíte atributem [CascadingParameter].
<h2>Deal: @DealName</h2>
@code {
[CascadingParameter(Name="DealName")]
private string DealName { get; set; }
}
V tomto příkladu má <h2> tag obsah Deal: Throwback Thursday , protože nadřazená komponenta nastaví tuto kaskádovou hodnotu.
Note
Pokud máte složitější požadavky, můžete objekty předat jako kaskádové parametry.
V předchozím příkladu atribut Name v nadřazeném objektu identifikuje kaskádovou hodnotu, která se shoduje s hodnotou Name v atributu [CascadingParameter]. Volitelně můžete tyto názvy vynechat, v takovém případě se atributy shodují podle typu. Vynechání názvu funguje dobře, pokud máte pouze jeden parametr tohoto typu. Pokud chcete kaskádovat dvě různé řetězcové hodnoty, je nutné použít názvy parametrů, aby nedocházelo k nejednoznačnosti.
Sdílení informací pomocí AppState
Dalším přístupem ke sdílení informací mezi různými komponentami je použití modelu AppState. Vytvoříte třídu, která definuje vlastnosti, které chcete uložit, a zaregistrujete ji jako vymezenou službu. V libovolné komponentě, ve které chcete nastavit nebo použít hodnoty AppState, vložíte službu a pak budete mít přístup k jeho vlastnostem. Na rozdíl od parametrů komponenty a kaskádových parametrů jsou hodnoty v AppState k dispozici pro všechny komponenty v aplikaci, a to i komponenty, které nejsou podřízenými komponentami komponenty, která hodnotu uložila.
Jako příklad vezměte v úvahu tuto třídu, která ukládá hodnotu o prodeji:
public class PizzaSalesState
{
public int PizzasSoldToday { get; set; }
}
Třídu byste do souboru Program.cs přidali jako službu s vymezeným oborem:
...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...
Nyní můžete v libovolné komponentě, ve které chcete nastavit nebo načíst hodnoty AppState, vložit třídu a pak přistupovat k vlastnostem:
@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++;
}
}
Note
Tento kód implementuje čítač, který se zvýší, když uživatel vybere tlačítko, podobně jako v příkladu v kurzu Blazor – sestavte svou první aplikaci Blazor. Rozdíl je v tom, že v tomto případě jsme hodnotu čítače uložili ve službě s vymezeným oborem AppState. Naše třída služby s vymezeným oborem umožňuje, aby počet trval napříč načítáním stránek a ostatní uživatelé ho uvidí.
V další lekci si to vyzkoušíte sami!