在断开与服务器的连接时如何更改上下文？

Question

我正在使用Blazor服务器端。

当Blazor应用断开与远程服务器的连接时，它将显示以下内容：

我想更改上面图像的文本（'无法重新连接到服务器...'，依此类推）。

我想将其更改为我们国家的语言。

我找到了项目的文件，但对此一无所获。

我该如何更改？谢谢。

Answer 1

Blazor应用程序将检查页面中是否有

id = {dialogId}的html元素：]

如果这样的元素不存在，它将使用默认的处理程序来显示消息。

如果此元素存在，则此元素的class将为：

尝试重新连接到服务器时设置为components-reconnect-show，

当连接服务器失败时设置为components-reconnect-failed。

如果浏览器到达服务器而服务器主动拒绝连接，则设置为components-reconnect-refused

默认情况下，

dialogId为components-reconnect-modal。因此，您可以在页面中创建一个元素，然后根据需要使用CSS来控制内容和样式。演示：

例如，我创建了要在Pages/_Host.cshtml中显示的内容的三个部分：

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
    <div class="show">
        <p>
            This is the message when attempting to connect to server
        </p>
    </div>
    <div class="failed">
        <p>
            This is the custom message when failing 
        </p>
    </div>
    <div class="refused">
        <p>
            This is the custom message when refused
        </p>
    </div>
</div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="_framework/blazor.server.js"></script>

然后让我们添加一些CSS来控制样式：

<style>
    .my-reconnect-modal > div{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        overflow: hidden;
        background-color: #fff;
        opacity: 0.8;
        text-align: center;
        font-weight: bold;
    }
    .components-reconnect-hide > div
    {
        display: none;
    }

    .components-reconnect-show > div
    {
        display: none;
    }
    .components-reconnect-show > .show
    {
        display: block;
    }

    .components-reconnect-failed > div
    {
        display: none;
    }
    .components-reconnect-failed > .failed
    {
        display: block;
    }

    .components-reconnect-refused >div
    {
        display: none;
    }
    .components-reconnect-refused > .refused
    {
        display: block;
    }
</style>

最后，当尝试连接或连接失败时，我们将收到以下消息：