在 Blazor 应用程序中共享数据

Blazor 包含多种在组件之间共享信息的方法。 可以使用组件参数或级联参数将值从父组件发送到子组件。 AppState 模式是另一种方法，可用于存储值并从应用程序中的任何组件访问它们。

假设你正在开发新的披萨配送网站。 应以相同方式在主页上显示多种披萨。 你希望通过为每个披萨呈现一个子组件来显示这些披萨。 现在，你想要向该子组件传递一个 ID，以便确定它将展示哪种披萨。 你还想要在多个组件上存储和显示一个值，这些组件显示你今天销售的披萨总数。

在本单元中，你将了解三种不同的技术，可用于在两个或多个 Blazor 组件之间共享值。

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

在 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] 值匹配。 可以选择省略这些名称，在这种情况下，属性按类型匹配。 在只有一个这种类型的参数时，省略名称是有效的。 如果要级联两个不同的字符串值，则必须使用参数名称以避免任何歧义。

使用 AppState 共享信息

在不同组件之间共享信息的另一种方法是使用 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++;
    }
}

在下一个单元中，你将亲自试一试！