Sdílení dat v aplikacích Blazor
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é součásti, která určuje pizzu, která se zobrazí. Chcete také uložit a zobrazit hodnotu u více komponent, 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. Podřízená komponenta může být také nadřazená jiným, menším komponentám, 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é položkách. 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čnete definováním parametru komponenty v podřízené komponentě. Definuje se jako veřejná vlastnost jazyka C#, která je označená 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 v HTML pomocí vyhrazeného @ symbolu Blazoru následovaného jejich názvem. Předchozí kód také určuje výchozí hodnotu parametru PizzaDescription . Tato hodnota se vykreslí, pokud nadřazená komponenta nepředává hodnotu. Jinak se přepíše hodnotou předanou z nadřazené položky.
Vlastní třídy můžete v projektu použít také jako parametry komponent. Vezměte v úvahu tuto třídu, která popisuje zastavení:
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í komponentám s vnoučaty z nadřazených komponent ani dále v hierarchii. 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ě určuje použití <CascadingValue> značky informace, které se budou kaskádovat pro všechny potomky. Tato značka se implementuje jako integrovaná komponenta 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 k kaskádové hodnotě pomocí členů komponent a jejich dekorací atributem [CascadingParameter] .
<h2>Deal: @DealName</h2>
@code {
[CascadingParameter(Name="DealName")]
private string DealName { get; set; }
}
V tomto příkladu <h2> tedy značka obsahuje obsah Deal: Throwback Thursday , protože tato kaskádová hodnota byla nastavena nadřazenou komponentou.
Poznámka:
Pokud máte složitější požadavky, můžete objekty předat jako kaskádové parametry, pokud máte složitější požadavky.
V předchozím příkladu je kaskádová hodnota identifikována Name atributem v nadřazené objektu, který se shoduje s Name hodnotou 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 přidali jako službu s vymezeným oborem do souboru Program.cs :
...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...
Teď 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++;
}
}
Poznámka:
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 uložili hodnotu čítače ve službě s vymezeným oborem AppState, počet se zachovává napříč načtením stránky a je vidět jinými uživateli.
V další lekci si to vyzkoušíte sami!