5.在 Blazor 应用程序中共享数据

目录

  Blazor 应用程序中共享数据

一、使用组件参数与其他组件共享信息

二、使用级联参数共享信息(级联参数) CascadingParameter

三、使用 AppState 共享信息

  Blazor 应用程序中共享数据

参考：https://learn.microsoft.com/zh-cn/training/modules/interact-with-data-blazor-web-apps/6-share-data-in-blazor-applications

 可用于在两个或多个 Blazor 组件之间共享值的三种不同方法

一、使用组件参数与其他组件共享信息

1. [Parameter] 特性 @ 符号（后跟其名称）在 HTML 中呈现它们。 

<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."
}

2. 将项目中的自定义类用作组件参数。使用与参数值相同的方式将该类用作组件参数

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

3.在父组件中，使用子组件标记的属性设置参数值。

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

二、使用级联参数共享信息(级联参数) CascadingParameter

使用 <CascadingValue> 标记指定将级联到所有子组件的信息
父组件

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

子组件

<h2>Deal: @DealName</h2>

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

三、使用 AppState 共享信息

    在不同组件之间共享信息的另一种方法是使用 AppState 模式。 创建一个定义要存储的属性的类，并将其注册为作用域服务。 在要设置或使用 AppState 值的任何组件中，注入该服务，然后可以访问其属性。 不同于组件参数和级联参数，AppState 中的值可用于应用程序中的所有组件，即使这些组件不是存储该值的组件的子组件也是如此。

1.数据类

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

2.注册服务 Program.cs 文件

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

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

3.组件中注入数据类

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