Como posso alterar o texto "Não foi possível reconectar ao servidor" no Blazor?

Estou usando o lado do servidor Blazor.

Quando o aplicativo Blazor se desconecta do servidor remoto, ele mostra o seguinte:

Quero alterar o texto ('Não foi possível reconectar ao servidor ...' e assim por diante) da imagem acima.

Eu quero mudar para o idioma do nosso país.

Encontrei o arquivo do projeto, mas não encontrei nada sobre isso.

Como posso mudá-lo? Obrigado.

O Blazor App verificará se há um elemento html com id ={dialogId} na página:

1. Se esse elemento não existir, ele usará o manipulador padrão para exibir a mensagem.
2. Se esse elemento existir, o elemento classserá:
   • definido como components-reconnect-showao tentar se reconectar ao servidor,
   • definido como components-reconnect-failedquando não conseguiu se conectar ao servidor.
   • definido como components-reconnect-refusedse o navegador chegasse ao servidor enquanto o servidor rejeitasse a conexão ativamente

Por padrão, o dialogIdé components-reconnect-modal. Assim, você pode criar um elemento na página e usar CSS para controlar o conteúdo e os estilos que desejar.

Demo:

Por exemplo, eu crio três partes do conteúdo para exibir dentro do 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>

E então vamos adicionar um pouco de CSS para controlar o estilo:

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

Por fim, receberemos a seguinte mensagem ao tentar conectar-se ou ao não conectar:

Para o lado do javascript, o Blazor expõe uma pequena API por meio do window.Blazorobjeto.

Uma parte dessa API é a defaultReconnectionHandlerque permite personalizar a experiência de reconexão, incluindo a definição de opções diferentes para o número de repetições, etc.

No entanto, também é possível trocar a lógica para exibir as informações ReconnectionDisplay

Uma implementação simples se parece com isso e permite que você controle o processo:

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();