Blazor 服务器应用程序的全局 toast 服务 Bootstrap

Question

我正在开发一个使用 Blazor Server (.NET 8) 和 Bootstrap (2.0.0) 的项目，我想使用 Bootstrap 的 toast 组件。例如，我想在登录时使用 Global toast 服务 显示我的 toast。

我遵循了 Blazor Bootstrap 文档和演示，但这不起作用。

MainLayout.razor：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        @* <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div> *@
        <article class="content px-4">
            @Body
        </article>
    </main>
    <Toasts class="p-3" Placement="ToastsPlacement.TopRight" />
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

登录.razor：

(...)
@code {
    [Inject] protected ToastService ToastService { get; set; }

    private async Task LogIn()
    {
        (Code to login in database)
        if (getAuthenticationFromDatabase != null && getAuthenticationFromDatabase.Succeeded)
        {
            ToastService.Notify(new(ToastType.Success, "Welcome"));
            ...
            Navigation.NavigateTo("/"); //redirect to go back to homepage
        }
    }
}

注意：当我将Bootstrap的Toasts标签移动到login.razor时，就会显示toast。

任何人都可以帮忙解释一下为什么当 toast 标签位于 MainLayout.razor 中时它不显示吗？

谢谢！

Answer 1

我也遇到同样的问题，请问你解决了吗？