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 頁面上的此問題