Blazor：如何在呈现 HTML 后调用 JavaScript

Question

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

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

Answer 1

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

注意：如果您启用了服务器端预呈现，请在 OnAfterRenderAsync 与 firstRender == true 一起执行之前不要第一次使用 JSRuntime。

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

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