如何更改 Blazor 中的“无法重新连接到服务器”文本？

Question

我正在使用 Blazor 服务器端。

当 Blazor 应用与远程服务器断开连接时，它会显示：

我想更改上图的文字（“无法重新连接到服务器...”等）。

我想把它改成我们国家的语言。

我找到了该项目的文件，但没有找到任何相关内容。

我怎样才能改变它？谢谢。

Answer 1

Blazor 应用会检查页面中是否有id={dialogId}的html元素：

1. 如果这样的元素不存在，它将使用默认处理程序来显示消息。
2. 如果此元素存在，则此元素的class 将为：
   • 尝试重新连接到服务器时设置为components-reconnect-show。
   • 重新连接失败时设置为components-reconnect-failed，可能是由于网络故障。要尝试重新连接，请致电 window.Blazor.reconnect()。
   • 当重新连接被拒绝时设置为components-reconnect-rejected。已到达服务器但拒绝连接，并且服务器上的用户状态丢失。要重新加载应用，请致电location.reload()。

默认情况下，dialogId 是 components-reconnect-modal。所以你可以在页面中创建一个元素，并使用 CSS 来控制你喜欢的内容和样式。

查看Microsoft Docs 了解最新信息。

演示：

例如，我创建了三部分内容以在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="rejected">
        <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-rejected >div
    {
        display: none;
    }
    .components-reconnect-rejected > .rejected
    {
        display: block;
    }
</style>

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

Answer 2

对于 javascript 方面的事情，Blazor 通过 window.Blazor 对象公开了一个微型 API。

此 API 的一部分是 defaultReconnectionHandler，它允许您自定义重新连接体验，包括为重试次数设置不同的选项等。

不过，也可以只换掉显示ReconnectionDisplay的逻辑

一个简单的实现看起来像这样，使您能够控制整个过程：

function createOwnDisplay() {
    return {
        show: () => { alert("put code that shows a toast , ui, or whaterver here"); },
        hide: () => { console.log('foo'); },
        failed: () => { console.log('foo'); },
        rejected: () => { console.log('foo'); }
    };
}

Blazor.defaultReconnectionHandler._reconnectionDisplay = createOwnDisplay();

Answer 3

在你的 CSS 中：

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
}
#components-reconnect-modal.components-reconnect-show{
    display: block;
}
#components-reconnect-modal.components-reconnect-show div.reconnecting {
    display: block;
}
div.reconnecting {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed div.failedToConnect {
    display: block;
}
div.failedToConnect {
    display: none;
}

#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}
#components-reconnect-modal.components-reconnect-rejected div.connectionRejected {
    display: block;
}
div.connectionRejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

在_Host正文中：

<div id="components-reconnect-modal">
    <div class="reconnecting">
        Подключение к серверу...
    </div>
    <div class="failedToConnect">
        Не удалось подключиться к серверу <input type="button" value="переподключиться" onclick="ReconnectToServer()" />
        <script>
            function ReconnectToServer() {
                window.Blazor.reconnect();
            }
        </script>
    </div>
    <div class="connectionRejected">
        Подключение к серверу прервано <input type="button" value="обновить страницу" onclick="ReloadPage()" />
        <script>
            function ReloadPage() {
                location.reload();
            }
        </script>
    </div>
</div>