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

Question

我的代码有问题，我的页面布局如下。我正在与数据库通信以获取主要内容的数据。这是List<SomeClass>我从数据库中获取的。现在我希望List<SomeClass>RightContent 也可以使用相同的内容。两个组件都是自定义的并且具有不同的布局，但可以共享相同的 List 而不是两次调用相同的调用。（序列是 MainContent Initialized() 方法首先被调用）

我创建了一个具有以下属性的服务类 AppDataService。也添加到IServiceCollection services启动中。

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

在 MainContent 中，我正在注入 AppDataService 并为 sharedListOfSomeClass 分配数据库值。现在，如果我在正确的内容中注入 AppDataService 并尝试访问 sharedListOfSomeClass 我得到它为空。

我知道我在这里缺少绑定，因为这两个组件在 html 方面都不同，并且无法将其绑定到任何 html 标签。

任何人都可以帮助我实现这一目标。我想为这两个组件对数据库进行一次调用。

Answer 1

如果您想拥有应用程序的某些全局状态并在不同组件之间共享它，最合理的方法是创建一个State包含全局状态数据的类

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

在您的Startup（或者Program如果您使用 Blazor wasm）中，您应该添加一个State对象作为单例

services.AddSingleton<State>()

在每个页面上，您需要访问状态的地方（或者即使_Imports您想经常访问它）添加

@inject State State

之后，您可以在任何页面上引用State.SomeClassObjectsCollection并获取相同的数据。

关键点是将状态添加为单例。如果您将其添加为瞬态甚至作用域，则依赖项容器将创建 的新实例State。

Answer 2

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

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

在父级传递中设置参数：

<MyCustomComponent sharedListOfSomeClass="@MyVariableHoldingTheListValues" />

我能想到的其他方法是创建一个静态列表并在组件中引用静态列表。

注入的场景为您提供 null，因为服务可以注册为瞬态或范围内的服务。不像单例。