如何更改“无法重新连接到服务器”？ Blazor中的文字？ [英] How can I change the "Could not reconnect to the server" text in Blazor?

问题描述

我正在使用Blazor服务器端。

I am using the Blazor server-side.

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

When the Blazor App disconnect to the remote server, it will shows this:

我想更改文本（无法重新连接到服务器...等等

I want to change the text ('Could not reconnect to the server...' and so on) of the image above.

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

I want to change it to the language of our country.

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

I found the file of the project but found nothing about this.

如何更改？谢谢。

推荐答案

Blazor应用程序将检查是否存在 id = 的html元素。页面中的{dialogId} ：

The Blazor App will check whether there's a html element with id={dialogId} in the page:

1. 如果该元素不存在，则表示该元素


2. 如果此元素存在，则此元素的类将为：
   $ b尝试重新连接到服务器时，将$ b
   
   
   • 设置为 components-reconnect-show ，
   
   
   • 设置为 components-reconnect-failed 时，它无法连接到服务器。
   
   
   • 如果浏览器到达服务器而服务器主动拒绝连接，则设置为 components-reconnect-refused
   
   

1. If such an element doesn't exists, it will use the default handler to display message.
2. If this element exists, this element's class will be :
   • set as components-reconnect-show when attempting to reconnect to the server,
   • set as components-reconnect-failed when it failed to connect to server.
   • set as components-reconnect-refused if the browser reaches the server while the server rejects the connection actively

默认情况下， dialogId 是 components-reconnect-modal 。因此，您可以在页面中创建一个元素，然后使用CSS根据需要控制内容和样式。

By default, the dialogId is components-reconnect-modal. So you can create an element in the page and use CSS to control the content and styles as you like.

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

For example, I create three parts of content to display within the 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来控制样式：

And then let's add some CSS to control the style:

<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>

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

Finally, we'll get the following message when attempting to connect or failing to connect:

这篇关于如何更改“无法重新连接到服务器”？ Blazor中的文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！