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

我正在使用Blazor server-side.

当Blazor App断开到远程服务器时,它将显示:

2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表 

我想更改上面图像的文本(“无法重新连接到服务器...”等).

我想把它改为我国的语言。

我找到了项目的文件,但没有发现这个.

我该如何改变?谢谢.

Postlagerkarte

  最佳答案

Blazor App将检查页面中是否有id = {dialogId}的html元素:

1. 如果这样的元素不存在,它将使用默认的处理程序来显示消息。
2. 如果存在此元素,则此元素的class将是: 2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表 2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表 在尝试重新连接到服务器时设置为components-reconnect-show, 当它无法连接到服务器时,设置为components-reconnect-failed. 如果浏览器到达服务器,而服务器积极拒绝连接,则设置为components-reconnect-refused 2001年12月31日终了的两年期收入和支出及准备金和基金结余变动报表

默认情况下,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>
 

最后,在尝试连接或无法连接时,我们会收到以下消息: