Lekce 5 - Blazor - Kaskádové hodnoty a parametry

V předchozí lekci, Blazor - Komponenty, jsme si popsali základní stavební prvek Blazor aplikací - komponenty a možnosti parametrů.

Další zajímavou možností, kterou Blazor nabízí, je předávání hodnot do podřízených komponent s pomocí tzv. kaskádových parametrů. Jejich využití je vhodné hlavně tam, kde:

• je potřeba předat stejnou hodnotu do více podřízených komponent nebo
• předávat hodnotu do komponenty, která je v hierarchii zanořena přes více vrstev.
• Třetím případem může být také předání instance nadřízené komponenty do podřízené pro zajištění vzájemné komunikace.

Pojďme si to ukázat.

Vytvoření kaskádové hodnoty

Kaskádovou hodnotu můžeme definovat s pomocí párového elementu <CascadingValue>:

<CascadingValue Value="...">
...
</CascadingValue>

Předávanou hodnotu vyplníme do atributu Value. Všechny komponenty, které se nacházejí mezi těmito dvěma tagy (v libovolné úrovni vnoření) si potom mohou tuto hodnotu přečíst definováním vlastnosti s atributem [CascadingParameter]. Název vlastnosti může být libovolný, ale datový typ musí být stejný jako u předávané hodnoty.

Příklad

Vyzkoušejme si to na příkladu. Vytvoříme si jednoduché komponenty ParentComponent a ChildComponent, které umístíme na novou stránku. Obarvíme jejich nadpisy s pomocí stylu, který předáme v kaskádové hodnotě jako textový řetězec:

Kód ChildComponent:

<h3 style="@Style">ChildComponent</h3>

@code {
    [CascadingParameter]
    public string Style { get; set; }
}

Kód ParentComponent:

...konec náhledu článku...
Pokračuj dál