Blazor 将值从 _Host 传递给组件

Question

在我的 _Host.cshtml 中，我有这样的代码：

@{
    var theme = "main";
    if (Request.Cookies.ContainsKey("theme"))
    {
        theme = Request.Cookies["theme"];
    };
}
@theme
...
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
...

有没有办法让我的 theme 变量值在我的 blazor 组件中可用？

Answer 1

我不知道 Theme 是什么，所以我把它当作一个字符串。

App

<div>
@Theme
</div>
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    [Parameter] public string? Theme {get; set;}
}

和_host.cshtml

@page "/"
@namespace BlazorApp8.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
    var theme = "Hello Blazor";
}

@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered, new { Theme =  theme}))

您现在可以级联值或将其添加到服务中。

Answer 2

有两种方法可以将参数从 Balzor 服务器应用程序的服务器部分传递到 front-end 部分。如何从 _Host.cshtml 文件

第二种方法是创建服务class并将其添加到 DI 容器，然后将服务实例注入到 Razor 组件中。以下示例描述了如何捕获 HttpContext、从 HttpContext 对象中提取一些数据、初始化和实例化服务 (UserInfoService)。

public void ConfigureServices(IServiceCollection services)
{
        services.AddHttpContextAccessor();

        services.AddScoped<UserInfoService>(ctx =>
        {
            var contextAccessor = ctx.GetService<IHttpContextAccessor> 
            ();
            var httpContext = contextAccessor.HttpContext;
            string userName = string.Empty;
            string email = string.Empty; ;
            bool isAuthenticated = false;

            if (httpContext.User.Identity.IsAuthenticated)
            {
                userName = httpContext.User.Identity.Name;
                email = httpContext.User.Claims.FirstOrDefault(
                                      c => c.Type == 
                                      ClaimTypes.Email)?.Value;
                isAuthenticated = 
                       httpContext.User.Identity.IsAuthenticated;
            }
            return new UserInfoService
            {
                Name = userName,
                Email = email,
                IsAuthenticated = isAuthenticated
            };
         });

UserInfoService.cs

 public class UserInfoService
    {
        public UserInfoService () { }
        public string Name { get; set; }
        public string Email { get; set; }
        public bool IsAuthenticated { get; set; }
    }

用法

@page "/"

@inject UserInfoService userInfo

<div>@userInfo.Name</div>
<div>@userInfo.Email</div>
<div>@userInfo.IsAuthenticated</div>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Blazor 将值从 _Host 传递给组件

Blazor pass value from _Host to components

blazor

blazor-server-side

UserInfoService.cs

用法