Blazor WebAssembly 更新页面标题

Question

Framework： .NET Core 3.1 (Blazor WebAssembly(

我刚刚搭建了一个简单的 Blazor WebAssembly 应用，并添加了多个页面。 在重定向到特定页面时，我想将窗口/选项卡标题更新为[Page Name] | My App.

在 MVC 或 Core ASP.NET 中，我们可以使用ViewBag来更新Layout.cshtml中的<title>元素。

Blazor WebAssembly 应用中的等效方法是什么？

谢谢。

Answer 1

您应该使用 Microsoft.AspNetCore.Components.Web.Extensions nuget 包：https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions。它目前仍处于预发布阶段，但稳定。

它完全符合您的需求，您可以获得<Title>、<Link>和<Meta>标签的组件。它仍然使用JavaScript来执行更新，但它比其他解决方案要干净得多。我个人在生产应用程序中成功使用此包。以下是设置方法：

1. 安装 nuget 包Install-Package Microsoft.AspNetCore.Components.Web.Extensions -Prerelease
2. 在根文件夹下的index.html文件中wwww添加对 JS 文件的引用：<script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js" type="module"></script>
3. 在要设置标题的任何*.razor页面上，或在文件夹的_Imports.razor文件中，添加 using 指令：@using Microsoft.AspNetCore.Components.Web.Extensions.Head
4. 根据需要使用各种标记：

<Title value="My Page Title" />
<Meta name="description" content="My Blazor Component" />
<Link rel="icon" type="image/x-icon" href="/favicon.ico" />
<Link rel="alternate" href="/feed.rss" type="application/rss+xml" />

Answer 2

同样，这里有一篇关于如何设置页面标题的不同博客文章。实质上，您使用导航管理器注入当前页面，然后使用 JS 互操作来调用页面标题的更新。

https://www.iambacon.co.uk/blog/setting-the-document-title-in-your-blazor-app

肯定有几种方法可以做到这一点。如果您在实施时遇到问题，请告诉我！