如何使等效的匿名 javascript 函数作为 Blazor 中 IJSObjectReference 的参数

Question

我正在 Blazor 中开发一项使用 JavaScript 地图的服务，我需要向该地图添加一个插件。我有一个脚本标签，它在我的 _Layout.cshtml 文件中引用库，然后在显示我使用的地图的组件中引用

@inject IJSRuntime JS

然后

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        origo = await JS.InvokeAsync<IJSObjectReference>("Origo", "index.json");
    }       
}

但是当我必须将插件添加到地图时，我卡住了，简单地说 HTML，添加插件看起来像这样

origo.on('load', function (viewer) {
    var draw = Draw({
        drawTools: {
            "Polygon": ["freehand", "box"],
            "LineString": ["freehand"]
        }
    });
    viewer.addComponent(draw);
});

我想我必须为 origo 上的 on 函数创建一个新的 IJSObjectReference，但是我如何创建一个等效于将插件添加到地图所需的匿名函数？有可能吗？

Answer 1

我用类似的组件做了一些工作。我创建了一个带有导出功能的 JS 文件。我不能确定这个函数中的确切代码，因为我不知道你使用的是什么插件以及它是如何初始化的。

import "..."; //Import the JS library of the plugin

export function initPlugin() {

    //Initialize origo here...
    origo = ...

    origo.on('load', function (viewer) {
    var draw = Draw({
         drawTools: {
           "Polygon": ["freehand", "box"],
           "LineString": ["freehand"]
         }
   });
   viewer.addComponent(draw);

}

然后，根据您的剃须刀代码：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        jsStacksEditorImported = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./myscript.js");
        await jsStacksEditorImported.InvokeAsync<IJSObjectReference>("initPlugin");
    }
}

如何使等效的匿名 javascript 函数作为 Blazor 中 IJSObjectReference 的参数

How to make equivalent of anonymous javascript function as paramter to IJSObjectReference in Blazor

javascript

blazor