如何在Blazor中声明全局变量？跨页面共享inputquestions示例

你在Index页面定义了inputquestions变量，想要在Quiz页面复用，下面是几种实现变量跨组件共享的可行方案：

方案一：使用依赖注入的共享状态服务（推荐） #

这是Blazor官方推荐的组件间状态共享方式，支持状态变化通知，适配大多数场景。

1. 创建共享状态服务 #

在项目中新建一个类QuizStateService.cs：

public class QuizStateService
{
    // 存储题目数量，默认值设为5
    public int InputQuestions { get; set; } = 5;

    // 状态变化通知事件，用于组件自动刷新
    public event Action OnStateChanged;

    // 更新题目数量并触发通知
    public void UpdateInputQuestions(int value)
    {
        InputQuestions = value;
        OnStateChanged?.Invoke();
    }
}

2. 注册服务到依赖注入容器 #

如果是MAUI Blazor项目，打开MauiProgram.cs，在CreateMauiApp方法中添加服务注册：

builder.Services.AddScoped<QuizStateService>();

（Web Blazor项目则注册到Program.cs即可）

3. 在Index页面使用服务修改状态 #

修改Index.razor代码，注入服务并绑定变量：

@page "/"
@inject QuizStateService QuizState

<h1>Quiz</h1>
Select Input Questions and Click on Quiz.
<div class="row">
    <p>Questions:</p>
    <input type="range" min="5" max="20" step="5" 
           @bind="@QuizState.InputQuestions" 
           @bind:event="oninput" />
</div>
<p>@QuizState.InputQuestions</p>

4. 在Quiz页面使用服务读取状态 #

修改Quiz.razor代码，注入服务并访问变量：

@page "/quiz"
@inject QuizStateService QuizState

<h2>Quiz Page</h2>
<p>Selected number of questions: @QuizState.InputQuestions</p>

@code {
    // 订阅状态变化事件，自动刷新页面
    protected override void OnInitialized()
    {
        QuizState.OnStateChanged += StateHasChanged;
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        QuizState.OnStateChanged -= StateHasChanged;
    }
}

方案二：使用静态类（简单场景快速实现） #

如果只是简单的变量共享，不需要实时状态通知，可以用静态类存储变量：

1. 创建静态类 #

public static class QuizSettings
{
    public static int InputQuestions { get; set; } = 5;
}

2. 在Index页面修改静态变量 #

修改Index.razor代码：

@page "/"

<h1>Quiz</h1>
Select Input Questions and Click on Quiz.
<div class="row">
    <p>Questions:</p>
    <input type="range" min="5" max="20" step="5" 
           @bind="@QuizSettings.InputQuestions" 
           @bind:event="oninput" />
</div>
<p>@QuizSettings.InputQuestions</p>

3. 在Quiz页面访问静态变量 #

@page "/quiz"

<h2>Quiz Page</h2>
<p>Selected number of questions: @QuizSettings.InputQuestions</p>

注意：静态类的状态是全局共享的，适合单用户场景（如MAUI Blazor桌面/移动应用），Web Blazor多用户场景不推荐使用。

方案三：使用路由参数传递（适合一次性传递） #

如果只是从Index页面跳转到Quiz页面时传递一次变量，可以用路由参数：

1. 修改Index页面添加跳转按钮 #

@page "/"
@inject NavigationManager NavigationManager

<h1>Quiz</h1>
Select Input Questions and Click on Quiz.
<div class="row">
    <p>Questions:</p>
    <input type="range" min="5" max="20" step="5" 
           @bind="@inputquestions" 
           @bind:event="oninput" />
</div>
<p>@inputquestions</p>
<button @onclick="() => NavigationManager.NavigateTo($"/quiz/{inputquestions}")">Go to Quiz</button>

@code {
    public int inputquestions = 5;
}

2. 修改Quiz页面接收参数 #

@page "/quiz/{inputQuestions:int}"

<h2>Quiz Page</h2>
<p>Selected number of questions: @InputQuestions</p>

@code {
    [Parameter]
    public int InputQuestions { get; set; }
}

这种方式适合一次性传递，不支持状态实时同步。

内容的提问来源于stack exchange，提问作者KALYANA ALLAM