Blazor - 如何调用位于布局和子组件上的独立 JSInterop 方法

Question

直到这篇文章首次发表的前一天，我一直在从应用程序中加载的任何页面调用 JSInvokable 方法。 我正在创建和建立 DotNotObjectReference 对象，正如大多数示例中传统上显示的那样：

var dotNetReference = DotNetObjectReference.Create(this);
JSRuntime.InvokeVoidAsync("SetDotNetObjectRef", dotNetReference);

在各个页面本身中，我将创建如下可调用方法：

@page "/Application/Search/Index/"

@code {
    [JSInvokable]
    public void InvokableMethodOnIndexPage(string id)
    {
        return;
    }

    protected override void OnAfterRender(bool isFirstRender)
    {
        if (isFirstRender)
        {
            var dotNetReference = DotNetObjectReference.Create(this);
            JSRuntime.InvokeVoidAsync("SetDotNetObjectRef", dotNetReference);
        }
    }
}

然后，我需要构建一个新的 JSInvokable 方法，该方法将在应用程序的任何页面上重复使用，因此我将该方法放在我的“MainLayout.razor”组件中，我的所有页面都从中派生设计布局，就像这样:

@code {
    [JSInvokable]
    public void InvokableMethodOnMainLayout(string id)
    {
        return;
    }

    protected override void OnAfterRender(bool isFirstRender)
    {
        if (isFirstRender)
        {
            var dotNetReference = DotNetObjectReference.Create(this);
            JSRuntime.InvokeVoidAsync("SetDotNetObjectRef", dotNetReference);
        }
    }
}

在我第一次尝试调用我放置在“MainLayout.razor”文件中的新 function 时，我得到了“'Index' 类型不包含带有 [JSInvokableAttribute('InvokableMethodOnMainLayout')]] 的公共可调用方法”。

通过我的研究和测试，我发现每个文件中的两行DotNetObjectReference.Create(this)与子实例覆盖“MainLayout”DotNetObjectReference 实例相互冲突。 当我删除子实例引用时，对 MainLayout 中方法的调用将执行正常，但反过来，它破坏了调用InvokableMethodOnIndexPage(string id)方法的能力。

我的第一个想法是更改 _Host 视图文件以维护一个引用数组，然后构建一个 helper function，它将遍历引用并try/catch每个引用，直到它找到一个引用，它可以找到我想调用的 function 但我认为这可能不是最好的方法和/或操作成本高昂。

因此，我可以问一下这里有什么合适的实现来提供从任何组件调用 JSInvokable 方法的功能吗？

问候。

Answer 1

因此，在有了启示并对此进行了更多思考之后，我测试了一种不同的方法来解决父子 Blazor 组件之间DotNetObjectReference的原始冲突，并提出了以下代码来解决手头的问题。

第一件事是在_Host文件中重做/创建 JavaScript 辅助函数，使其类似于以下内容：

window.DotNetObjectRefs = [];

window.SetDotNetObjectRef = function (dotNetObjectRef, componentName) {
    if(window.DotNetObjectRefs.filter(dnor => return dnor.ComponentName === componentName).length <= 0)
    {
        window.DotNetObjectRefs.push({ ComponentName: componentName, Reference: dotNetObjectRef });
    }
};

window.InvokeMethodAsync = function (assembly, componentName, method, args) {
    for(let r = 0; r < window.DotNetObjectRefs.length; r++)
    {
        if (window.DotNetObjectRefs[r].ComponentName === componentName)
        {
            window.DotNetObjectRefs[r].Reference.invokeMethodAsync(method, args);
        }
    }
};

对此的关键更改是保存一组不会相互冲突的引用。 通过创建一个数组来保存引用，您可以创建多个引用并使用引用实例化引用的组件的命名约定添加它们。 然后，当你需要调用一个可调用的function时，除了方法名和arguments之外，你只需指定可调用方法来自的组件即可。

然后，在任何需要 JSInterop 功能的组件中，这：

JSRuntime.InvokeVoidAsync("SetDotNetObjectRef", DotNetObjectReference.Create(this));

变成这样：

JSRuntime.InvokeVoidAsync("SetDotNetObjectRef", DotNetObjectReference.Create(this), "Reference_Component_Name");

这将允许您在任何组件上定义 JSInvokable 方法，并且只要您在Invoke调用中引用组件名称，就可以从任何其他组件调用它们。