Blazor 的 OnInitializedAsync 事件在 DOM 完成之前触发答案

【问题标题】：Blazor's OnInitializedAsync event fires before DOM is finishedBlazor 的 OnInitializedAsync 事件在 DOM 完成之前触发
【发布时间】：2019-10-12 19:15:16
【问题描述】：

我目前正在开发一个托管/客户端 Blazor WebAssembly 应用程序，该应用程序在最初运行时运行良好。

在正在呈现的页面的“OnInitializedAsync”方法中是一个 javascript 调用，用于检索页面上 html 元素的宽度。如果我在 javascript 函数中设置断点，则在初始应用程序运行时，浏览器将显示呈现的页面并且元素属性被正确检索。但是，当我刷新浏览器页面时，当断点被击中时，浏览器还没有完成页面渲染，因此元素的宽度为零。

谁能告诉我这是为什么以及如何解决这个问题？

<div @ref="_carPanelWidth">
    ....
</div>

@code {

    private ElementReference _carPanelWidth;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var carPanelWidth = await JsRuntime.InvokeAsync<int>("utilityFunctions.getElementWidth", new object[] { _carPanelWidth });

        StateHasChanged();
    }
}

window.utilityFunctions = {

    getElementWidth: function (element) {
        return element.offsetWidth;
    }
};

【问题讨论】：

标签： blazor-client-side

【解决方案1】：

我在渲染网格时会遇到类似的情况。它会导致看起来不专业的浮华。

我所做的是将 html 元素标记为隐藏，然后在我知道所有内容都已加载时显示它们。如果这是您遇到的问题，这将完全消除闪存。

<div id="table_id_div" style="visibility:hidden">

我使用 interopt 将 DataTable.com 的内容应用到表中，完成后 javascript 运行...

$("#" + tableName + "_div").attr('style', 'visibility : visible');

这似乎可以解决问题。

【讨论】：

感谢 Bob 提供的信息，非常感谢，但对于我的特殊问题，我无法使用这种方法。目前我已经将代码放在一个循环中并等到元素具有宽度 - 我希望有更好的解决方案。
明白。如果我想到其他任何事情，我会告诉你的。该解决方案对我有用，但我同意它并不理想。