Blazorで「サーバーに再接続できませんでした」というテキストを変更するにはどうすればよいですか？

Blazorサーバー側を使用しています。

Blazorアプリがリモートサーバーへの接続を切断すると、次のように表示されます。

上記の画像のテキスト（「サーバーに再接続できませんでした...」など）を変更したいと思います。

私の国の言語に変更したいと思います。

プロジェクトのファイルは見つかりましたが、何も見つかりませんでした。

どうすれば変更できますか？ありがとうございました。

Blazorアプリは、id =のhtml要素があるかどうかをチェックします{dialogId}ページにあるします。

1. そのような要素が存在しない場合は、デフォルトのハンドラーを使用してメッセージを表示します。
2. この要素が存在する場合、この要素の classようになります。
   • として設定され components-reconnect-showサーバーへの再接続を試みるときのに、
   • として設定され components-reconnect-failedサーバーへの接続に失敗したときのようにします。
   • components-reconnect-refusedサーバーが接続をアクティブに拒否している間にブラウザがサーバーに到達するかのように設定します

デフォルトでは、dialogIdありますcomponents-reconnect-modal。したがって、ページに要素を作成し、CSSを使用してコンテンツとスタイルを自由に制御できます。

デモ：

たとえば、コンテンツの3つの部分を作成して、内に表示します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>

最後に、接続しようとしたとき、または接続に失敗したときに、次のメッセージが表示されます。

物事のJavaScript側では、Blazorはwindow.Blazorオブジェクトを介して小さなAPIを公開します。

このAPIの一部は defaultReconnectionHandler、再試行回数などのさまざまなオプションの設定など、再接続エクスペリエンスをカスタマイズできる。

ただし、ロジックを表示するためにロジックを交換することもできます。 ReconnectionDisplay

単純な実装は次のようになり、プロセスを制御できるようになります。

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