Blazor アプリケーションでデータを共有する

Blazor には、コンポーネント間で情報を共有するいくつかの方法が含まれています。 コンポーネント パラメーターまたはカスケード パラメーターを使用して、親コンポーネントから子コンポーネントに値を送信できます。 AppState パターンは、値を格納し、アプリケーション内の任意のコンポーネントからアクセスするために使用できるもう 1 つのアプローチです。

新しいピザ配達 Web サイトで作業しているとします。 同じ方法で複数のピザをホーム ページに表示する必要があります。 ピザごとに子コンポーネントをレンダリングして、ピザを表示する必要があります。 ここで、表示するピザを決定する ID をその子コンポーネントに渡します。 また、今日販売したピザの合計数を示す複数のコンポーネントに値を格納して表示することもできます。

このユニットでは、2 つ以上の Blazor コンポーネント間で値を共有するために使用できる 3 つの異なる手法について説明します。

コンポーネント パラメーターを使用して他のコンポーネントと情報を共有する

Blazor Web アプリでは、各コンポーネントが HTML の一部をレンダリングします。 完全なページをレンダリングするコンポーネントもあれば、テーブル、フォーム、単一のコントロールなど、マークアップの小さなフラグメントをレンダリングするコンポーネントもあります。 コンポーネントがマークアップのセクションのみをレンダリングする場合は、それを親コンポーネント内の子コンポーネントとして使用する必要があります。 子コンポーネントは、その中でレンダリングされる他の小さなコンポーネントの親にすることもできます。 子コンポーネントは、入れ子になったコンポーネントとも呼ばれます。

親コンポーネントと子コンポーネントのこの階層では、 コンポーネント パラメーターを使用してそれらの間で情報を共有できます。 子コンポーネントでこれらのパラメーターを定義し、その値を親に設定します。 たとえば、ピザの写真を表示する子コンポーネントがある場合は、コンポーネント パラメーターを使用してピザ ID を渡すことができます。 子コンポーネントは、ID からピザを検索し、画像やその他のデータを取得します。 多数の異なるピザを表示する場合は、同じ親ページでこの子コンポーネントを複数回使用し、各子に異なる ID を渡すことができます。

まず、子コンポーネントでコンポーネント パラメーターを定義します。 これを C# パブリック プロパティとして定義し、 [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."
}

コンポーネント パラメーターは子コンポーネントのメンバーであるため、Blazor の予約済み @ シンボルとその名前を使用して HTML でレンダリングできます。 また、上記のコードでは、 PizzaDescription パラメーターの既定値を指定します。 この値は、親コンポーネントが値を渡さない場合にレンダリングされます。 それ以外の場合は、親から渡された値がそれを上書きします。

また、プロジェクトのカスタム クラスをコンポーネント パラメーターとして使用することもできます。 トッピングを記述するこのクラスについて考えてみましょう。

public class PizzaTopping
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
}

これは、パラメーター値と同じ方法でコンポーネント パラメーターとして使用し、ドット構文を使用してクラスの個々のプロパティにアクセスできます。

<h2>New Topping: @Topping.Name</h2>

<p>Ingredients: @Topping.Ingredients</p>

@code {
    [Parameter]
    public PizzaTopping Topping { get; set; }
}

親コンポーネントでは、子コンポーネントのタグの属性を使用してパラメーター値を設定します。 単純なコンポーネントは直接設定します。 カスタム クラスに基づくパラメーターでは、インライン C# コードを使用して、そのクラスの新しいインスタンスを作成し、その値を設定します。

@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." })" />

カスケード パラメーターを使用して情報を共有する

コンポーネントの直下の子に値を渡す場合は、コンポーネント パラメーターが適切に機能します。 子孫が続くような深い階層になると、物事は厄介になります。 コンポーネント パラメーターは、先祖コンポーネントから、または階層の下の孫コンポーネントに自動的に渡されません。 この問題をエレガントに処理するために、Blazor にはカスケード パラメーターが含まれています。 コンポーネントでカスケード パラメーターの値を設定すると、その値はすべての子孫コンポーネントで任意の深さに自動的に使用できます。

親コンポーネントでは、 <CascadingValue> タグを使用して、すべての子孫に連鎖する情報を指定します。 このタグは、組み込みの Blazor コンポーネントとして実装されます。 そのタグ内でレンダリングされるすべてのコンポーネントは、値にアクセスできます。

@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>

子孫コンポーネントでは、コンポーネント メンバーを使用し、 [CascadingParameter] 属性で修飾することで、カスケード値にアクセスできます。

<h2>Deal: @DealName</h2>

@code {
    [CascadingParameter(Name="DealName")]
    private string DealName { get; set; }
}

したがって、この例では、先祖コンポーネントがそのカスケード値を設定するため、 <h2> タグにはコンテンツ Deal: Throwback Thursday があります。

前の例では、親のName属性がカスケード値を識別します。これは、Name属性の[CascadingParameter]値と一致します。 必要に応じて、これらの名前を省略できます。この場合、属性は型によって一致します。 名前を省略すると、その型のパラメーターが 1 つしかない場合に適切に機能します。 2 つの異なる文字列値をカスケードする場合は、あいまいさを回避するためにパラメーター名を使用する必要があります。

AppState を使用して情報を共有する

異なるコンポーネント間で情報を共有するもう 1 つの方法は、AppState パターンを使用することです。 格納するプロパティを定義するクラスを作成し、それをスコープサービスとして登録します。 AppState 値を設定または使用する任意のコンポーネントで、サービスを挿入し、そのプロパティにアクセスできます。 コンポーネント パラメーターやカスケード パラメーターとは異なり、AppState の値は、値を格納したコンポーネントの子ではないコンポーネントであっても、アプリケーション内のすべてのコンポーネントで使用できます。

たとえば、売上に関する値を格納するこのクラスを考えてみましょう。

public class PizzaSalesState
{
    public int PizzasSoldToday { get; set; }
}

クラスをスコープサービスとして Program.cs ファイルに追加します。

...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...

ここで、AppState 値を設定または取得するコンポーネントで、クラスを挿入してから、プロパティにアクセスできます。

@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++;
    }
}

次のユニットでは、自分で試してみましょう。