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 中呈现它们。 

New Pizza: @PizzaName

@PizzaDescription

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

New Topping: @Topping.Name

Ingredients: @Topping.Ingredients

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

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

@page "/pizzas-toppings"

Our Latest Pizzas and Topping

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

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

@page "/specialoffers"

Special Offers


    

子组件

Deal: @DealName

@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();

3.组件中注入数据类

@page "/"
@inject PizzaSalesState SalesState

Welcome to Blazing Pizzas

Today, we've sold this many pizzas: @SalesState.PizzasSoldToday

Buy a Pizza

@code {
    private void IncrementSales()
    {
        SalesState.PizzasSoldToday++;
    }
}