Blazor：在子组件中加载 JS 文件并公开其方法

Question

问题

我正在尝试在子组件中加载 JavaScript 文件并将其方法公开给父组件。 我已经能够加载文件，但是每当我尝试在子组件之外使用我的方法时，都会出现错误。 我提供了一个最小示例供参考。

我真的很困惑为什么这不起作用......我的想法是这与子组件没有完全渲染有关。 而且我不确定如何解决它。

最小示例

页

// Page.razor
<ChildComponent @ref="Ref" />

@code {
  private ChildComponent Ref;

  protected override async Task OnAfterRenderAsync()
  {
    await Ref.Test();
  }
}

子组件

// ChildComponent.razor
@inject IJSRuntime JS

@code {
  private IJSObjectReference Module;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      Module = await JS.InvokeAsync<IJSObjectReference>("import", "./ChildComponent.razor.js");
    }
  }

  public async Task Test()
  {
    await Module.InvokeVoidAsync("Test");
  }
}

// ChildComponent.razor.js
export function Test() {
  alert("Hello world!");
}

错误

Answer 1

在这个组件中，我动态加载“.js”。

注意：此组件存在于名为“ChatClient.Core”的 RCL 中。 .js文件位于 RCL 的wwwroot文件夹wwwroot/scripts中。

public partial class Dialog : ComponentBase, IAsyncDisposable
{
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;
    private DotNetObjectReference<Dialog> dotNetObjectReference;
    private ElementReference dialogElement;

    public Dialog()
    {
        moduleTask = new(() => jsRuntime!.InvokeAsync<IJSObjectReference>(
            identifier: "import",
            args: "./_content/ChatClient.Core/scripts/dialogJsInterop.js")
        .AsTask());

        dotNetObjectReference = DotNetObjectReference.Create(this);
    }

    [Inject]
    private IJSRuntime jsRuntime { get; set; }
   
...
    public async ValueTask ShowDialogAsync()
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync(identifier: "showDialog", dialogElement, dotNetObjectReference);
    }

...  

    public async ValueTask DisposeAsync()
    {
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }
}

export function showDialog(element, parm) {   
    let dialog = element;
    let dotNetHelper = parm;
    dialog.addEventListener('close', () => {
        dotNetHelper.invokeMethodAsync('OnDialogClosed');
    });
    return element.showModal();
}