Blazor에서 "서버에 다시 연결할 수 없습니다"텍스트를 어떻게 변경합니까?

Blazor 서버 측을 사용하고 있습니다.

Blazor 앱과 원격 서버의 연결이 끊기면 다음과 같이 표시됩니다.

위 이미지의 텍스트 ( '서버에 다시 연결할 수 없습니다 ...'등)를 변경하고 싶습니다.

나는 우리 나라의 언어로 바꾸고 싶다.

프로젝트 파일을 찾았지만 이것에 대해서는 아무것도 찾지 못했습니다.

어떻게 바꾸나요? 감사합니다.

Blazor 앱은 페이지에 id = 인 html 요소{dialogId} 가 있는지 확인합니다 .

1. 이러한 요소가 존재하지 않으면 기본 핸들러를 사용하여 메시지를 표시합니다.
2. 이 요소가 존재하면이 요소 class는 다음과 같습니다.
   • components-reconnect-show서버에 다시 연결하려고 할 때 설정
   • components-reconnect-failed서버 연결에 실패했을 때 설정 합니다.
   • components-reconnect-refused서버가 연결을 적극적으로 거부하는 동안 브라우저가 서버에 도달하는 것처럼 설정

기본적으로는 dialogId입니다 components-reconnect-modal. 따라서 페이지에서 요소를 만들고 CSS를 사용하여 원하는대로 내용과 스타일을 제어 할 수 있습니다.

데모:

예를 들어, 콘텐츠 내에 표시 할 콘텐츠의 세 부분을 만듭니다 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>

마지막으로 연결을 시도하거나 연결에 실패하면 다음 메시지가 표시됩니다.

Java의 측면에서 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();