Blazor：如何在 HTML 渲染后调用 JavaScript

Question

我有一个自定义组件，当它在浏览器中呈现时，我需要测量其大小（在 JavaScript 中）并回调 Blazor。

如何注册 JavaScript 以在特定组件渲染完成后调用？

Answer 1

1. 在您的 wwwroot 中包含一个脚本。
2. 在index.html或_Host.cshtml文件中引用它
3. 在你的组件中添加@inject IJSRuntime JSRuntime
4. 将 a 添加@ref到您要测量的元素<div @ref=MeasureMe>
5. 在你@code声明一个字段ElementReference MeasureMe
6. 重写 OnAfterRenderAsync 并执行var whatever = JSRuntime.InvokeAsync<YourResultType>("yourJSFunctionName", MeasureMe)

注意：如果您启用了服务器端预渲染，请不要首次使用 JSRuntime，直到OnAfterRenderAsync使用 执行after 后firstRender == true。

另请注意：调整浏览器大小时，组件不会重新呈现。

我在Blazor University上有一个关于 JSInterop 的部分。