5. diel - Blazor - Kaskádové hodnoty a parametre

V predchádzajúcej lekcii, Blazor - Komponenty , sme si popísali základný stavebný prvok Blazor aplikácií - komponenty a možnosti parametrov.

Ďalšou zaujímavou možnosťou, ktorú Blazor ponúka, je odovzdávanie hodnôt do podriadených komponentov s pomocou tzv. Kaskádových parametrov. Ich využitie je vhodné hlavne tam, kde:

• je potreba odovzdať rovnakú hodnotu do viacerých podriadených komponentov alebo
• odovzdávať hodnotu do komponenty, ktorá je v hierarchii zavesená cez viac vrstiev.
• Tretím prípadom môže byť tiež odovzdanie inštancie nadradenej komponenty do podriadenej pre zaistenie vzájomnej komunikácie.

Poďme si to ukázať.

Vytvorenie kaskádové hodnoty

Kaskádové hodnotu môžeme definovať s pomocou párového elementu <CascadingValue>:

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

Odovzdávanú hodnotu vyplníme do atribútu Value. Všetky komponenty, ktoré sa nachádzajú medzi týmito dvoma tagy (v ľubovoľnej úrovni vnorenia) si potom môžu túto hodnotu prečítať definovaním vlastnosti s atribútom [CascadingParameter]. Názov vlastnosti môže byť ľubovoľný, ale dátový typ musí byť rovnaký ako u odovzdávané hodnoty.

Príklad

Vyskúšajme si to na príklade. Vytvoríme si jednoduché komponenty ParentComponent a ChildComponent, ktoré umiestnime na novú stránku. Zafarbíme ich nadpisy s pomocou štýlu, ktorý odovzdáme v kaskádové hodnote ako textový reťazec:

Kód ChildComponent:

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

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

Kód ParentComponent:

...koniec náhľadu článku...
Pokračuj ďalej