Blazor App（服务器渲染）-> 处理 DOM 对象大小更改的服务

Question

Javascript 不是我最强大的部分，绝对不与 Blazor 结合使用，但与 Google 和一些 AI 合作，获得了一个事件侦听器，如果浏览器大小发生变化，该事件侦听器可以在我的 Blazor 应用程序上运行代码。
现在我需要对我的一些

<div id="abc">

执行相同的操作，因为我有需要设置高度/宽度（以像素为单位）的组件。

我的 Blazor 文件：

@inject DivSizeService dServer

.. html ..


@code {
.. 
protected override async Task OnInitializedAsync()
{
    dService.OnDivSizeChanged += HandleDivSizeChanged;  
}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {

        if (firstRender)
        {
            await dService.StartListeningForDivSizeChanges("abc");
            await UpdateDivSize();
        }
    }

    private async void HandleDivSizeChanged(object sender, DivSizeChangedEventArgs e)
    {
        if (e.ElementId == "abc")
        {
            await UpdateDivSize();
        }
    }

    async Task UpdateDivSize()
    {
        divSize = await dService.GetDivSize("abc");
        Style = "Width: " + (divSize.Width - 50).ToString() + "px; Height: " + 
            (divSize.Height - 50).ToString() + "px;";

        ChildComponent.Refresh // pseudocode
    }

还有我的 DivSizeService ：

public class DivSizeService
{
    private readonly IJSRuntime _js;

    public event EventHandler<DivSizeChangedEventArgs> OnDivSizeChanged;

    public DivSizeService(IJSRuntime js)
    {
        _js = js;
    }

    public async Task<DivSize> GetDivSize(string elementId)
    {
        return await _js.InvokeAsync<DivSize>("getElementDimensions", elementId);
        //var dimensions = await _js.InvokeAsync<DivSize>("getDimensionsA");
        //return new DivSize { Width = dimensions.Width, Height = dimensions.Height };
    }

    public async Task StartListeningForDivSizeChanges(string elementId)
    {
        await _js.InvokeVoidAsync("registerResizeListener", elementId);
    }

    [JSInvokable]
    public void HandleDivSizeChanged(string elementId, DivSize newSize)
    {
        OnDivSizeChanged?.Invoke(this, new DivSizeChangedEventArgs(elementId, newSize));
    }
}

public class DivSizeChangedEventArgs : EventArgs
{
    public string ElementId { get; }
    public DivSize NewSize { get; }

    public DivSizeChangedEventArgs(string elementId, DivSize newSize)
    {
        ElementId = elementId;
        NewSize = newSize;
    }
}

还有我的 Javascript :

window.getElementDimensions = function (elementId) {
    const element = document.getElementById(elementId);
    return {
        width: element ? element.offsetWidth : 0,
        height: element ? element.offsetHeight : 0
    };

window.registerResizeListener = (element) => {
    const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
            entry.target.dispatchEvent(new Event('resize'));
        }
    });

    observer.observe(element);
}

我的 window.getElementDimensions 有效，我尝试在 browsersize 更改时运行它，但在该事件完成之前我的 div 不会更新大小，这样我就可以获得 div 的先前大小。

当我使用上面的代码时，我得到：

抛出异常：System.Private.CoreLib.dll 中的“Microsoft.JSInterop.JSException” 抛出异常：System.Private.CoreLib.dll 中的“Microsoft.JSInterop.JSException” Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer：警告：未处理的异常渲染组件：无法在“ResizeObserver”上执行“观察”：参数 1 不是“Element”类型。 TypeError：无法在“ResizeObserver”上执行“observe”：参数 1 不是“Element”类型。

我知道我在 window.registerResizeElement 中得到 element = "abc" 但我想这不是正确的方法？它在observer.observe(element)上崩溃；

Answer 1

出现错误的行是这一行：

observer.observe(element);

因为你将

element

传递给

observe

，它不是元素的集合，而是其他东西，请参阅

await _js.InvokeVoidAsync("registerResizeListener", elementId);

我不确定元素的 id 是否被传递给事件或元素本身。无论哪种情况，您都需要将其转换为正确的类型，因此如果

element

是一个 id，那么这将起作用

observer.observe(document.querySelectorAll("#" + element));

否则，如果

element

是一个元素，那么这将起作用

observer.observe(document.querySelectorAll("#" + element.id));