Blazor在组件之间传递List<T>

Question

我有一个编程方面的问题，我的页面布局如下。我正在与数据库通信，以获取“Main Content”的数据。我从数据库中得到了一个 List<SomeClass>。现在我希望同样的List<SomeClass>可用于“RightContent”。这两个组件都是自定义的，并具有不同的布局，但可以共享相同的List，而不是两次进行相同的调用。（顺序是先调用MainContent Initialized()方法）。

我创建了一个名为AppDataService的服务类，并添加了以下属性。也添加到startup的IServiceCollection services中。

public List<SomeClass> sharedListOfSomeClass = new List<SomeClass>();

在 MainContent 中，我注入了 AppDataService 并将 sharedListOfSomeClass 赋值为数据库中的值。 现在，如果我在 Right Content 中注入 AppDataService 并尝试访问 sharedListOfSomeClass，我会得到 null。 我知道我错过了绑定，因为这两个组件在 html 方面是不同的，不能将其绑定到任何 html 标签上。 请问有谁能帮我实现这个目标。我想为这两个组件只调用一次数据库。

- ZKS

Answer 1

如果想要在不同的组件之间共享应用程序的全局状态，最合理的方法是创建一个State类，其中包含全局状态数据。

public class State
{
    public List<SomeClass> SomeClassObjectsCollection { get; set; } = new List<SomeClass>();
}

在您的启动文件（如果使用Blazor wasm，则为Program）中，应将State对象添加为单例。

services.AddSingleton<State>()

在每个页面上，如果您需要访问状态（甚至在_Imports中经常需要访问），请添加以下内容：

@inject State State

接着在任何页面中你都可以引用State.SomeClassObjectsCollection并获得相同的数据。

关键点是将状态添加为单例。如果将其添加为瞬态甚至范围限定，依赖容器将创建State的新实例。

- Дмитро Іванов

---

然而，这样做的问题在于，如果应用程序由多个用户使用，则每个应用程序在进入生产时都将访问该单例。例如，如果它是一个购物车，则应用程序中的每个用户都将看到其他用户的购物车。 - Jeffrey Padgett

并不完全是这样。Blazor Server 为每个用户的会话创建了一个通道 - 一个状态。而 Blazor WebAssembly 则完全在用户的浏览器中执行。因此，每当 SPA 被加载和初始化为用户创建一个新的单例时，该单例将存在于用户保持浏览器标签打开或重新加载页面的时间内。 - Дмитро Іванов

Answer 2

一种选项是将列表作为参数传递给组件。在组件代码中定义一个参数。

[Parameter] public List<SomeClass> sharedListOfSomeClass { get; set; }

在父级传递时设置参数：

<MyCustomComponent sharedListOfSomeClass="@MyVariableHoldingTheListValues" />

我能想到的另一种方式是创建一个静态列表并在组件中引用它。

如果服务被注册为瞬态或范围服务而不是单例，则进行注入可能会返回null。

- Zsolt Bendes