如何确保 blazor 在 wasm 加载后执行？

Question

我从新模板 Blazor Web App 创建了一个新项目 该文件位于 BlazorProject.Client 项目中

下面的代码有时会在初始网站调试时生成此渲染的 html：

WASM: False
Messages:

但偶尔也会呈现预期的结果：

WASM: True
Messages:
OnInitialized<br />OnParametersSet<br />OnAfterRenderAsync True<br />Wasm Delay in ms: 57<br />Interop.GetWelcomeMessage() Olá do Blazor! 1<br />JS Delay in ms: 59

这是我的 CallJavascript3.razor 测试文件：

@namespace AM.WebsiteBlazor.Client.Components
@rendermode InteractiveAuto
@using AM.WebsiteBlazor.Client.JavaScriptInterop
@inject IJSRuntime jsRuntime;

<div style="height:200px;">&nbsp;</div>

WASM: @isWASM
<br />
Messages:<br />
@(message is not null ? (MarkupString) message: string.Empty)

@code {
    private List<string> messages = new List<string>();

    private bool isWASM = false;

    private bool isRendered = false;

    private bool jsIsExecuted = false;

    private string? message;

    private DateTime startDateTime = DateTime.Now;

    protected override void OnInitialized()
    {
        messages.Add("OnInitialized"); 
    } 
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        messages.Add($"OnAfterRenderAsync {firstRender}");
        isRendered = true;
        StateHasChanged();
        return Task.CompletedTask;
    }

    protected override void OnParametersSet()
    {
        messages.Add("OnParametersSet");
    }

}

@{
    if (isRendered && !jsIsExecuted)
    {
        while (!isWASM)
        {
            isWASM = this.jsRuntime is IJSInProcessRuntime;
        }
        messages.Add("Wasm Delay in ms: " + (DateTime.Now - startDateTime).TotalMilliseconds.ToString());
        messages.Add($"Interop.GetWelcomeMessage() " + Interop.GetWelcomeMessage()); 
        messages.Add("JS Delay in ms: " + (DateTime.Now - startDateTime).TotalMilliseconds.ToString());
        message = String.Join("<br />", messages.ToArray());
        jsIsExecuted = true;
    } 
}

如果您想知道为什么我使用 while 语句，我的原始代码是这样的：

protected override void OnAfterRender(bool firstRender)
    {
        var isWebAssembly = this.jsRuntime is IJSInProcessRuntime;
        if (isWebAssembly)
        {
            message = Interop.GetWelcomeMessage();
        }
        else
        {
            message = "This is not WebAssembly";
        }

        if (firstRender)
        {
            message += " (first render)";
        }
        StateHasChanged();

    }

但类似地，在 wasm 渲染后，OnAfterRender 偶尔不会被调用

那么，如何确保在调试后首次加载页面时，我们达到 isWASM 为 true 的点？

Answer 1

我必须将 @rendermode InteractiveAuto 更改为 InteractiveWebAssembly