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 的部分。