如何 Blazor 互操作从类型为模块的 js 脚本（生成的 TS）调用函数

Question

我希望我没有错过其他主题的任何合适的解决方案。正如主题所说，我正在使用 blazor 进行互操作调用。这工作正常，但现在我的带有 class 定义的 TypeScript 文件通过导入使用另一个 TS 模块。后来我添加了带有 type="module" 属性的脚本，以避免 another issue. 现在我对这个脚本函数的互操作调用（通过 JSRuntime）不再起作用，可能是因为模块 classes 和变量的范围有限？

在代码之前，非常感谢您的帮助！

CanvasFeeder 中的示例 class。ts/js 以及通过互操作调用的方法：

export class CanvasFeeder
{
   public InitCanvas(){ }
}
export * as CanvasFeed from "CanvasFeeder";

var MyCanvasFeeder = new CanvasFeeder();
var ToCallInterop = () => {MyCanvasFeeder.InitCanvas();};

脚本参考 index.html:

<script src="typescript/CanvasFeeder.js" type="module"></script>

我尝试了什么？

JSRuntime.InvokeVoidAsync("ToCallInterop");
JSRuntime.InvokeVoidAsync("MyCanvasFeeder.ToCallInterop");

我还尝试实例化 class 并直接在 index.html 中运行。

错误信息是什么？

未处理的异常：找不到 'ToCallInterop'
未处理的异常：'ToCallInterop' 不是变量（在 index.html

Answer 1

Blazor 查找要在 window 上调用的函数，因此您需要将 MyCanvasFeeder 对象存储在 window 对象中。

window['MyCanvasFeeder'] = new CanvasFeeder()

如何 Blazor 互操作从类型为模块的 js 脚本（生成的 TS）调用函数

How to Blazor interop call a function from an js script (TS generated) of type module

javascript

interop

module

typescript

blazor