Ant 设计 Blazor 显示消息回调不起作用

Question

我正在尝试使用带有 Ant 设计 Blazor 的操作的卡显示一条消息； 但是，由于某种原因，我收到一条错误消息，提示“关键字在当前上下文中不可用”。

这特别是由于以下 RenderFragment：

private RenderFragment actionEdit =@<Template><Button Type="primary" Icon="edit" OnClick="ShowMessage" /></Template>;

该页面的完整代码如下。 这是使用 Blazor 服务器在 Visual Studio 2019 上使用 .Net 5 创建的

    @page "/"
    @inject MessageService _message
    <PageContainer Title="Template">
        <Card>
            <Alert Message="Welcome to the Blazor - Ant Design Template"
                   Type="success"
                   ShowIcon
                   Banner
                   Style="margin: -12px; margin-bottom: 24px" />
            <Text Strong>
                <a target="_blank" rel="noopener noreferrer" href="https://https://antblazor.com/en-US/components">
                    Ant Design Blazor - Use this library for UI Components
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0">
                    Blazor Introduction
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://medium.com/swlh/using-npm-packages-with-blazor-2b0310279320">
                    NPM WebPack
                </a>
            </Text>
            <Text Strong
                  Style="margin-bottom: 12px">
                <a target="_blank" rel="noopener noreferrer" href="https://github.com/Azure-Samples/ms-identity-blazor-server/tree/main/WebApp-OIDC/MyOrg/blazorserver-singleOrg">
                    Authentication
                </a>
            </Text>
        </Card>
        <div>
            <Card Style="width:300px;" Bordered Cover=@image Actions="new[] { actionSetting, actionEdit }">
                <CardMeta Title="Meta Card" Description="Create Some Cards" />
            </Card>
        </div>
    </PageContainer>
    @code
    {
        private RenderFragment actionSetting =@<Template><Button Type="primary" Icon="setting" /></Template>;
        private RenderFragment actionEdit =@<Template><Button Type="primary" Icon="edit" OnClick="ShowMessage" /></Template>;
        private RenderFragment image = @<ImageCard source="/Images/58adc5e81f9a190b00c2fc4f_lo.png" />;
    
    
        private void ShowMessage(MouseEventArgs e)
        {
            _message.Info("test");
        }
    }

关于解决此问题的方法或解释这里发生的事情的资源的任何想法？

Answer 1

您在正确的轨道上，但您错过了一件事 - 您需要将一个名为<AntContainer />的容器组件添加到App.razor组件。

因此，为了使用 Message 组件显示消息，您需要确保已将<AntContainer />组件添加到App.Razor中。

然后像这样使用：

@inject MessageService _message

<Button Type="primary" Icon="edit" OnClick="ShowMessage" />

@code
{
    private void ShowMessage(MouseEventArgs e)
    {
        _message.Info("test");
    }
}

更多细节：

AntBlazor 文档 - 消息组件

AntBlazor 的 Github 页面上的此问题