如何在新变量中捕获组件的参数值

Question

我有这个组件，其中一些参数在同一组件内取值。我想要的是从另一个地方调用组件，并获取这些参数的值（不更改或分配它们，而是将它们捕获在新变量中）以使用这些值执行一些验证。 这样，通过在本地存储中验证是否存在任何关键 UserMail 来初始化组件，如果有，则捕获该值，其想法是在其他页面上验证和使用该组件，在开始时检查该组件是否存在包含 userCorreo 中的值，如果是，则使用该布局渲染页面 我的组件带有参数：

@inject NavigationManager NavigationManager
@inject Blazored.LocalStorage.ILocalStorageService _InjectILocalStorage

@rendermode InteractiveServer
<p>@_UserCorreo</p>
@code {

    public string _UserCorreo { get; set; } = "A";

    public bool _ValidateUserCorre { get; set; } = false;
 
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

        if (firstRender)
        {

            _UserCorreo = await _InjectILocalStorage.GetItemAsync<string>("UserCorreo");

            if (string.IsNullOrEmpty(_UserCorreo))
            {
                NavigationManager.NavigateTo("/Login", forceLoad: true);
            }
            else
            {
                
                StateHasChanged();

            }
        }


    }
}

我想在哪里调用它（在 mainLayout 中）：

@inherits LayoutComponentBase

<!-- Usando la referencia del componente UserName -->
<UserName @ref="Us" />

<!-- Accediendo a las propiedades públicas del componente UserName -->
<p>@Us._UserCorreo</p>

@if (Us._ValidateUserCorre)
{
    <div class="page">
        <div class="sidebar bg-1">
            <NavMenu />
        </div>

        <main>
            <div class="top-row px-4 bg-2">
                <span class="mx-3 text-secondary">Hi, @Us._UserCorreo</span>
                <div class="contenedor-img-perfil bg-light"></div>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
}

@code {
    // Declaración del componente UserName
    private UserName Us;

    // Método OnInitialized para inicializar el componente
    protected override void OnInitialized()
    {
        // Inicialización del componente UserName
        
    }
}

我想要的是这样做，有一个调用新页面的组件，其中包含本地存储中是否存在具有特定密钥的电子邮件的信息，如果有，则渲染页面，如果没有，则重定向从组件到登录...我需要的是从组件中提取已检测电子邮件是否存在的组件的值，如果不存在，甚至重定向到登录，如果存在，则分配它是一个变量..我对新方法持开放态度，如果可能的话简单、高质量和一致的方法。

Answer 1

组件并不是为了维护 SPA 中的状态而设计的。 使用范围服务。

这是使用简单作用域

UserService

来保存用户数据的基本实现。

首先是服务：

using System.Runtime.CompilerServices;

namespace SO78660764;

public class UserService
{
    public UserData? User {  get; private set; }
    public bool HasUser => User != null;

    // Explicit setter to protect the property from exprernal change
    public void UpdateUser(string userName)
    {
        // Validate here if you wish
        this.User = new(userName);
    }
}

// Simple value based data object to hold the user data
// You probably have more than just the UserName
// You can use this object to store the data in the local storage
public record UserData(string UserName);

在计划中注册。

builder.Services.AddScoped<UserService>();

封装填充服务的组件。

public class UserProvider : ComponentBase
{
    [Inject] private UserService UserService { get; set; } = default!;
    [Inject] private ILocalStorageService LocalStorageService { get; set; } = default!;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var user = await LocalStorageService.GetItemAsync<string>("UserCorreo");
            if (user is not null)
                UserService.UpdateUser(user ?? "No Name");
        }
    }
}

我已将其添加到

Routes

，以确保它在 SPA 会话启动早期呈现。

<UserProvider />
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

您现在可以在需要的地方注入并使用

UserService

。