blazor - 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使用firstRender == true.

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

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