Wie kann ich den Text "Verbindung zum Server konnte nicht wiederhergestellt werden" in Blazor ändern?

Ich verwende die Blazor-Serverseite.

Wenn die Blazor-App die Verbindung zum Remote-Server trennt, wird Folgendes angezeigt:

Ich möchte den Text ('Verbindung zum Server konnte nicht wiederhergestellt werden ...' usw.) des obigen Bildes ändern.

Ich möchte es in die Sprache unseres Landes ändern.

Ich habe die Datei des Projekts gefunden, aber nichts darüber gefunden.

Wie kann ich das ändern? Vielen Dank.

Die Blazor-App prüft, ob die Seite ein HTML-Element mit id = enthält{dialogId} :

1. Wenn ein solches Element nicht vorhanden ist, wird der Standardhandler zum Anzeigen der Nachricht verwendet.
2. Wenn dieses Element vorhanden ist, lautet dieses Element class:
   • Stellen Sie ein, wie components-reconnect-showbeim Versuch, die Verbindung zum Server wiederherzustellen.
   • Festlegen, components-reconnect-failedwann keine Verbindung zum Server hergestellt werden konnte.
   • Stellen Sie ein, als components-reconnect-refusedob der Browser den Server erreicht, während der Server die Verbindung aktiv ablehnt

Standardmäßig ist das dialogIdist components-reconnect-modal. Sie können also ein Element auf der Seite erstellen und mithilfe von CSS den Inhalt und die Stile nach Ihren Wünschen steuern.

Demo:

Zum Beispiel erstelle ich drei Teile des Inhalts, die in folgenden Bereichen angezeigt werden sollen 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>

Und dann fügen wir etwas CSS hinzu, um den Stil zu steuern:

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

Schließlich wird die folgende Meldung angezeigt, wenn versucht wird, eine Verbindung herzustellen, oder wenn keine Verbindung hergestellt werden kann:

Für die Javascript-Seite macht Blazor eine winzige API über das window.BlazorObjekt verfügbar .

Ein Teil dieser API ist die defaultReconnectionHandler, mit der Sie die Wiederverbindungserfahrung anpassen können, einschließlich der Einstellung verschiedener Optionen für die Anzahl der Wiederholungsversuche usw.

Es ist jedoch auch möglich, die Logik für die Anzeige des einfach auszutauschen ReconnectionDisplay

Eine einfache Implementierung sieht folgendermaßen aus und ermöglicht es Ihnen, den Prozess zu steuern:

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