Jak mogę zmienić tekst „Nie można ponownie połączyć się z serwerem” w Blazor?

Korzystam z serwera Blazor.

Gdy aplikacja Blazor rozłączy się ze zdalnym serwerem, wyświetli to:

Chcę zmienić tekst („Nie można ponownie połączyć się z serwerem ...” itd.) Powyższego obrazu.

Chcę to zmienić na język naszego kraju.

Znalazłem plik projektu, ale nic na ten temat nie znalazłem.

Jak mogę to zmienić? Dziękuję Ci.

Blazor App sprawdzi, czy istnieje element html z id ={dialogId} na stronie:

1. Jeśli taki element nie istnieje, użyje domyślnego modułu obsługi do wyświetlenia komunikatu.
2. Jeśli ten element istnieje, classbędzie to:
   • ustawione jak components-reconnect-showprzy próbie ponownego połączenia z serwerem,
   • ustawiono tak components-reconnect-failed, jakby nie udało się połączyć z serwerem.
   • ustawione tak, components-reconnect-refusedjakby przeglądarka docierała do serwera, podczas gdy serwer aktywnie odrzuca połączenie

Domyślnie dialogIdjestcomponents-reconnect-modal . Możesz więc utworzyć element na stronie i używać CSS do kontrolowania zawartości i stylów według własnego uznania.

Próbny:

Na przykład tworzę trzy części treści do wyświetlenia w 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>

A następnie dodajmy trochę CSS, aby kontrolować styl:

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

Wreszcie, podczas próby połączenia lub niepowodzenia połączenia otrzymamy następujący komunikat:

Jeśli chodzi o javascript, Blazor udostępnia window.Blazorobiekt poprzez API .

Jedną częścią tego interfejsu API jest defaultReconnectionHandler możliwość dostosowania sposobu ponownego połączenia, w tym ustawienie różnych opcji liczby ponownych połączeń itp.

Możliwe jest jednak także zamiana logiki wyświetlania ReconnectionDisplay

Prosta implementacja wygląda tak i pozwala uzyskać kontrolę nad procesem:

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