如何在Blazor中将匿名javascript函数等效为IJSObjectReference的参数

Question

我正在使用JavaScript地图的Blazor服务上工作，我需要添加一个插件到该地图。我有一个脚本标签，在我的_Layout中引用库。然后在显示地图的组件中使用

@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");
}
}