Làm cách nào tôi có thể thay đổi văn bản không thể kết nối lại với văn bản của máy chủ trong Blazor?

Tôi đang sử dụng phía máy chủ Blazor.

Khi Ứng dụng Blazor ngắt kết nối với máy chủ từ xa, nó sẽ hiển thị:

Tôi muốn thay đổi văn bản ('Không thể kết nối lại với máy chủ ...', v.v.) của hình ảnh trên.

Tôi muốn thay đổi nó sang ngôn ngữ của đất nước chúng tôi.

Tôi tìm thấy các tập tin của dự án nhưng không tìm thấy gì về điều này.

Làm thế nào tôi có thể thay đổi nó? Cảm ơn bạn.

Ứng dụng Blazor sẽ kiểm tra xem có phần tử html nào có id ={dialogId} trong trang không:

1. Nếu một phần tử như vậy không tồn tại, nó sẽ sử dụng trình xử lý mặc định để hiển thị thông báo.
2. Nếu phần tử này tồn tại, phần tử này classsẽ là:
   • được đặt như components-reconnect-showkhi cố gắng kết nối lại với máy chủ,
   • thiết lập như components-reconnect-failedkhi không kết nối được với máy chủ.
   • đặt như components-reconnect-refusedthể trình duyệt đến máy chủ trong khi máy chủ từ chối kết nối tích cực

Theo mặc định, dialogIdlà components-reconnect-modal. Vì vậy, bạn có thể tạo một yếu tố trong trang và sử dụng CSS để kiểm soát nội dung và kiểu dáng theo ý muốn.

Bản giới thiệu:

Ví dụ: tôi tạo ba phần nội dung để hiển thị trong 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>

Và sau đó hãy thêm một số CSS để điều khiển kiểu:

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

Cuối cùng, chúng tôi sẽ nhận được thông báo sau khi cố gắng kết nối hoặc không kết nối:

Đối với khía cạnh javascript, Blazor trưng ra một API nhỏ thông qua window.Blazorđối tượng.

Một phần của API này là defaultReconnectionHandlercho phép bạn tùy chỉnh trải nghiệm kết nối lại, bao gồm cài đặt các tùy chọn khác nhau cho số lượng retrys, v.v.

Tuy nhiên, cũng có thể trao đổi logic để hiển thị ReconnectionDisplay

Một cấy ghép đơn giản trông như thế này và cho phép bạn có được các điều khiển trong suốt quá trình:

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