Blazor使用AntDesign框架遇到的问题
《1》使用Message弹出全局信息无法正常显示 ，后面是DeepSeek搜索关键信息找到答案（本项目是Blazor Web App框架，net9.0）
客户端和服务器端都要注入builder.Services.AddAntDesign();
在 Blazor WebApp 项目中，为了支持动态弹出组件（如 Ant Design 的 Message、Modal 等），你需要在 App.razor 中添加 <AntContainer /> 组件，并为它指定渲染模式（RenderMode）。以下是详细的实现步骤和注意事项：
1. 为什么需要 <AntContainer />？
-
Ant Design Blazor 的弹出组件（如
Message、Modal、Notification等）依赖于<AntContainer />组件来渲染动态内容。 -
<AntContainer />是一个容器组件，用于承载这些动态内容。如果没有它，弹出组件将无法正常显示。2
2下面是更换Server端App.razor代码之后信息栏就能正常弹出了，代码如下
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorAppShopDemo.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet"> <!-- 自动引入到这里 -->
<link antblazor-css />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script> <!-- 自动引入到这里 -->
<script antblazor-js></script>
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
@* <Routes @rendermode="RenderMode.InteractiveAuto" /> *@
<AntContainer @rendermode="RenderMode.InteractiveAuto" />
</body>
</html>
《2》在Blazor中的子组件每次都重新初始化
在 Blazor 中，组件的生命周期决定了它何时会被初始化、渲染和销毁。如果你希望 Add 组件在每次打开 Drawer 时重新初始化，而不是只在程序启动时初始化一次，可以通过以下几种方式实现：
1. 使用 @key 强制重新渲染
Blazor 提供了 @key 指令，可以通过改变 @key 的值来强制重新渲染组件。你可以在 Drawer 打开时生成一个新的 key，从而让 Add 组件重新初始化。
<div>
<Button Type="ButtonType.Primary" @onclick="Open">Open</Button>
<Drawer Closable="true" @bind-Visible="visible" Placement="DrawerPlacement.Right" Title='("Basic Drawer")' OnClose="OnClose" OnOpen="OnOpen">
@if (visible)
{
<Add @key="componentKey" Id=@model.ProductId OnDataReturned="HandleDataReturned"></Add>
}
</Drawer>
</div>
@code {
private bool visible = false;
private Model model = new Model();
private Guid componentKey = Guid.NewGuid(); // 用于 @key 的唯一值
private void Open()
{
visible = true;
componentKey = Guid.NewGuid(); // 每次打开时生成一个新的 key
}
private void OnClose()
{
visible = false;
}
private void OnOpen()
{
// 可以在这里执行一些打开时的逻辑
}
private void HandleDataReturned()
{
// 处理数据返回的逻辑
}
}
说明：
-
每次点击
Open按钮时，componentKey会生成一个新的Guid，这会强制 Blazor 重新初始化Add组件。 -
@if (visible)确保Add组件只在Drawer可见时渲染。
浙公网安备 33010602011771号